'use client'

import { useEffect, useState } from 'react'
import type { Category } from '@/data/menu'

type Props = {
  categories: Category[]
  lang: string
}

export default function BottomTabBar({ categories, lang }: Props) {
  const l = lang as 'tr' | 'en'
  const [activeId, setActiveId] = useState<string>(categories[0]?.id ?? '')

  useEffect(() => {
    const observers: IntersectionObserver[] = []

    categories.forEach((cat) => {
      const el = document.getElementById(cat.id)
      if (!el) return

      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              setActiveId(cat.id)
            }
          })
        },
        { rootMargin: '-20% 0px -75% 0px', threshold: 0 }
      )

      observer.observe(el)
      observers.push(observer)
    })

    return () => {
      observers.forEach((obs) => obs.disconnect())
    }
  }, [categories])

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-40 bg-coffee border-t border-coffee-light"
      style={{ height: 'var(--tabbar-h)' }}
    >
      <div className="flex items-start justify-around pt-2.5 h-full">
        {categories.map((cat) => {
          const isActive = activeId === cat.id
          return (
            <a
              key={cat.id}
              href={`#${cat.id}`}
              className={`tab-item flex flex-col items-center gap-0.5 flex-1 py-0.5 ${
                isActive ? 'text-teal' : 'text-cream/35'
              }`}
            >
              <span className="text-lg leading-none">{cat.emoji}</span>
              <span className="font-body text-[0.55rem] font-medium leading-none tracking-wide text-center px-0.5 truncate w-full text-center">
                {cat.label[l]}
              </span>
              <div
                className="tab-active-dot"
                style={{ opacity: isActive ? 1 : 0 }}
              />
            </a>
          )
        })}
      </div>
    </nav>
  )
}