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

export function MenuItem({ item, onClick, priority }: { item: MenuItemType; onClick?: () => void; priority?: boolean }) {
  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">
            <Image 
              src={item.image} 
              alt={item.name}
              width={80}
              height={80}
              priority={priority}
              className="w-20 h-20 object-cover rounded-lg shadow-sm"
            />
          </div>
        )}
      </div>
    </div>
  );
}