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-start gap-4 py-4 rounded-xl px-2 -mx-2 transition-colors ${
        !isLast ? 'border-b border-[rgba(61,43,31,0.06)]' : ''
      }`}
      style={{ '--item-index': index } as React.CSSProperties}
    >
      {/* Image or Emoji circle */}
      <div
        className="w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0 text-3xl overflow-hidden shadow-sm mt-0.5"
        style={{
          background: '#FDFCF8',
          border: '1px solid rgba(212,200,176,0.30)',
        }}
      >
        {item.image ? (
          <img src={item.image} alt={item.name[l]} className="w-full h-full object-cover" />
        ) : (
          item.emoji || '✨'
        )}
      </div>

      {/* Text Content */}
      <div className="flex-1 min-w-0 pt-0.5">
        <div className="flex justify-between items-start gap-2">
          <h3
            className="font-display text-coffee font-semibold leading-tight mb-1"
            style={{ fontSize: '1.05rem' }}
          >
            {item.name[l]}
          </h3>
          
          {/* Price */}
          {item.price !== undefined && (
            <span 
              className="flex-shrink-0 font-medium text-coffee mt-0.5"
              style={{ fontSize: '1rem' }}
            >
              {item.price} {currency}
            </span>
          )}
        </div>
        
        {item.description && (
          <p
            className="font-body text-muted leading-relaxed line-clamp-2"
            style={{ fontSize: '0.85rem' }}
          >
            {item.description[l]}
          </p>
        )}
      </div>
    </div>
  )
}