import type { Category } from '@/data/menu'
import MenuItemRow from './MenuItemRow'

type Props = {
  category: Category
  lang: string
  currency: string
}

export default function CategorySection({ category, lang, currency }: Props) {
  const l = lang as 'tr' | 'en'
  return (
    <section id={category.id} className="category-section px-4 pt-8 pb-2">
      {/* Category heading */}
      <div className="flex items-center gap-2.5 mb-4">
        <span className="text-xl">{category.emoji}</span>
        <h2 className="font-display text-coffee text-lg font-semibold italic">
          {category.label[l]}
        </h2>
        {/* Decorative line */}
        <div className="flex-1 h-px bg-beige-dark" />
      </div>

      {/* Items */}
      <div>
        {category.items.map((item, i) => (
          <MenuItemRow
            key={item.id}
            item={item}
            lang={lang}
            currency={currency}
            index={i}
          />
        ))}
      </div>
    </section>
  )
}