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

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

export default function MenuItemRow({ item, lang, currency, index, isLast }: Props) {
  const l = lang as 'tr' | 'en'

  return (
    <div
      className={`menu-item-row flex items-center gap-3.5 py-3.5 rounded-xl px-2 -mx-2 ${
        !isLast ? 'border-b border-dashed border-beige' : ''
      }`}
      style={{ '--item-index': index } as React.CSSProperties}
    >
      {/* Emoji circle with gradient */}
      <div
        className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 text-[1.2rem]"
        style={{
          background:
            'linear-gradient(135deg, #F0E8D8 0%, #E8DCC8 100%)',
          border: '1px solid rgba(212,200,176,0.80)',
          boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.8)',
        }}
      >
        {item.emoji}
      </div>

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

      {/* Price pill */}
      <span className="price-pill flex-shrink-0">
        {currency}{item.price}
      </span>
    </div>
  )
}
