import { notFound } from 'next/navigation'
import { getDictionary, hasLocale } from './dictionaries'
import { categories } from '@/data/menu'
import Header from '@/components/Header'
import CategorySection from '@/components/CategorySection'
import BottomTabBar from '@/components/BottomTabBar'
import WhatsAppButton from '@/components/WhatsAppButton'

export default async function MenuPage({
  params,
}: {
  params: Promise<{ lang: string }>
}) {
  const { lang } = await params
  if (!hasLocale(lang)) notFound()

  const dict = await getDictionary(lang)

  return (
    <>
      <Header dict={dict} />

      <main
        className="bg-cream min-h-screen"
        style={{
          paddingTop: 'var(--header-h)',
          paddingBottom: 'calc(var(--tabbar-h) + 8px)',
        }}
      >
        {/* Subtle top fade from header */}
        <div
          className="h-4 bg-gradient-to-b from-beige/30 to-transparent"
          aria-hidden="true"
        />

        {categories.map((category) => (
          <CategorySection
            key={category.id}
            category={category}
            lang={lang}
            currency={dict.currency}
          />
        ))}

        {/* Bottom spacing */}
        <div className="h-6" aria-hidden="true" />
      </main>

      <WhatsAppButton
        message={dict.whatsapp.message}
        label={dict.whatsapp.label}
      />

      <BottomTabBar categories={categories} lang={lang} />
    </>
  )
}