
import { menuCategories } from "../data/menuData";

export default function Menu() {
  return (
    <section id="menu" className="py-20 px-6 bg-white">

      {/* Heading */}
      <div className="text-center mb-16">
        <p className="text-orange-400 text-lg font-semibold tracking-widest uppercase mb-2">
          What We Serve
        </p>
        <h2 className="text-5xl md:text-6xl font-extrabold text-gray-900">
          Our <span className="text-orange-500">Menu</span>
        </h2>
        <div className="flex items-center justify-center mt-4">
          <div className="w-24 h-[2px] bg-orange-500"></div>
          <span className="mx-4 text-orange-500 text-2xl">✦</span>
          <div className="w-24 h-[2px] bg-orange-500"></div>
        </div>
      </div>

      {/* Categories */}
      <div className="max-w-5xl mx-auto space-y-12">
        {menuCategories?.map((category) => (
          <div key={category.category}>

            {/* Category Heading */}
            <h3 className="text-2xl font-bold text-orange-500 uppercase tracking-wider mb-4 border-l-4 border-orange-500 pl-4">
              {category.category}
            </h3>

            {/* Items Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {category.items?.map((item) => (
                <div
                  key={item.id}
                  className="flex justify-between items-center bg-orange-50 border border-orange-100 hover:border-orange-400 transition duration-300 rounded-xl px-5 py-4"
                >
                  {/* Item Name */}
                  <span className="text-gray-800 font-semibold text-lg">
                    {item.name}
                  </span>

                  {/* Price */}
                  <span className="text-orange-500 font-bold text-sm text-right ml-4">
                    {typeof item.price === "object" ? (
                      <span className="flex flex-col items-end gap-1">
                        {item.price.plate && <span>Plate: {item.price.plate}</span>}
                        {item.price.half && <span>Half: {item.price.half}</span>}
                        {item.price.full && <span>Full: {item.price.full}</span>}
                      </span>
                    ) : (
                      item.price
                    )}
                  </span>
                </div>
              ))}
            </div>

          </div>
        ))}
      </div>
    </section>
  );
}