import type { MenuItem } from '@/data/menu'

type Props = {
  item: MenuItem
  lang: string
  currency: string
  index: number
}

export default function MenuItemRow({ item, lang, currency, index }: Props) {
  const l = lang as 'tr' | 'en'
  return (
    <div
      className="menu-item-row flex items-center gap-3.5 py-3.5 border-b border-dashed border-beige last:border-0"
      style={{ '--item-index': index } as React.CSSProperties}
    >
      {/* Emoji circle */}
      <div className="w-10 h-10 rounded-full bg-beige flex items-center justify-center flex-shrink-0 text-lg">
        {item.emoji}
      </div>

      {/* Text */}
      <div className="flex-1 min-w-0">
        <p className="font-display text-coffee text-sm font-semibold leading-snug">
          {item.name[l]}
        </p>
        <p className="font-body text-muted text-xs leading-relaxed mt-0.5 line-clamp-2">
          {item.description[l]}
        </p>
      </div>

      {/* Price */}
      <span className="font-body text-green text-sm font-semibold flex-shrink-0 pl-2">
        {currency}{item.price}
      </span>
    </div>
  )
}