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 category-reveal px-4 pt-12 pb-2">
      {/* Category header */}
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-3">
          {/* Subtle minimal Emoji badge */}
          <div className="relative flex-shrink-0">
            <div
              className="w-12 h-12 rounded-full flex items-center justify-center text-2xl shadow-sm"
              style={{
                background: '#FDFCF8',
                border: '1px solid rgba(212,200,176,0.40)',
              }}
            >
              {category.emoji}
            </div>
          </div>

          {/* Title */}
          <div className="flex-1 min-w-0 flex items-center gap-2">
            <h2
              className="font-display font-semibold text-coffee uppercase tracking-wide leading-tight"
              style={{ fontSize: '1.25rem' }}
            >
              {category.label[l]}
            </h2>
            {/* Item count badge */}
            <span
              className="font-body text-[0.65rem] font-semibold tracking-widest text-muted mt-0.5"
            >
              ({category.items.length})
            </span>
          </div>
        </div>

        {/* Minimalist divider */}
        <div
          className="w-full h-px"
          style={{
            background: 'linear-gradient(90deg, rgba(61,43,31,0.15) 0%, transparent 100%)',
          }}
        />
      </div>

      {/* Items list (no background card) */}
      <div className="flex flex-col gap-1">
        {category.items.map((item, i) => (
          <MenuItemRow
            key={item.id}
            item={item}
            lang={lang}
            currency={currency}
            index={i}
            isLast={i === category.items.length - 1}
          />
        ))}
      </div>
    </section>
  )
}