import React from "react";
import Image from "next/image";
import { MenuItem as MenuItemType } from "@/data/menu";

export function MenuItem({ item, onClick }: { item: MenuItemType; onClick?: () => void }) {
  return (
    <div
      className="py-3.5 border-b last:border-b-0 cursor-pointer transition-colors hover:bg-black/5"
      style={{ borderColor: "rgba(140, 108, 72, 0.08)" }}
      onClick={onClick}
    >
      <div className="flex justify-between items-start gap-4">
        <div className="flex-1 min-w-0">
          <h3
            className="text-[13.5px] font-semibold leading-snug font-sans"
            style={{ color: "var(--stone-ink)" }}
          >
            {item.name}
          </h3>
          {item.description && (
            <p
              className="mt-0.5 text-[11.5px] leading-relaxed font-sans line-clamp-2"
              style={{ color: "var(--stone-muted)" }}
            >
              {item.description}
            </p>
          )}
          {item.price && (
            <div
              className="mt-1 text-[13px] font-semibold font-sans tabular-nums"
              style={{ color: "var(--amber)" }}
            >
              {item.price}
            </div>
          )}
        </div>
        {item.image && (
          <div className="shrink-0 relative w-20 h-20">
            <Image 
              src={item.image} 
              alt={item.name} 
              fill
              sizes="80px"
              unoptimized={item.image.startsWith('/')}
              className="object-cover rounded-lg shadow-sm"
            />
          </div>
        )}
      </div>
    </div>
  );
}