import React from "react";
import Image from "next/image";
import "./appetizers.css";
import Menu from "./items.json";
import { Button } from "@/components/ui/button";

const Appetizers = () => {
  return (
    <div className="flex flex-col w-full">
      <div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
        <Image
          src="/gun01.svg"
          alt="gun icon for decor"
          className="rotate-45"
          width={70}
          height={50}
        />
        <div className="">Appetizers</div>
        <Image
          src="/gun01.svg"
          alt="gun icon for decor"
          className="gun_menu gun_rotate"
          width={70}
          height={50}
        />
      </div>
      {/* Mapping out the menu */}
      <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
        {Menu.map((menu_item) => {
          return (
            <div
              key={menu_item.id}
              className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
            >
              <div className="h-[55%] relative w-full overflow-hidden">
                <Image
                  src={`/${menu_item.photo}`}
                  alt="chili pepper spice"
                  fill
                  style={{ objectFit: "cover", objectPosition: "center" }}
                  quality={100}
                  className="rounded-t-lg"
                />
              </div>
              <h4 className="">
                <strong>{menu_item.name}</strong>
              </h4>
              <p className="max-w-[75ch]">Description: {menu_item.description}</p>
              <div className="flex flex-row bg-gray-500 justify-evenly">
                <div className="bg-red-400 flex flex-row">
                  <span>
                    {menu_item.price_large ? (
                      <span>
                        <strong>Large</strong> - ${menu_item.price_large},
                        <strong>Small</strong> - ${menu_item.price_small}
                      </span>
                    ) : (
                      <span>${menu_item.price}</span>
                    )}
                  </span>
                </div>
                <div className="flex bg-emerald-400 w-1/2 relative">
                  <div className="flex bg-blue-600 w-3 h-full items-end justify-end">
                    <div className="">
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* <div className="col-span-2 gap-6 bg-green-400">
        <div className="flex flex-row space-x-2 bg-gray-400">
          <h4 className="text-semibold">
            Guacamole Dip 
            <div className="">
            <span>$7 - Large, $5 - small</span>
            </div>
          </h4>
          <p>
            Made fresh daily. Avocado, Pico de Gallo, Seasoning, with fresh lime
            juice.
          </p>
        </div>
        <div className="flex flex-row space-x-2 bg-pink-400">
          <h4>Chiles Toreados -</h4>
          <div className="flex relative space-x-6">
            <span>$5</span>
            <Image
              src="/red-chili-pepper.svg"
              alt="chili pepper spice"
              fill
              style={{ objectFit: "contain", objectPosition: "center" }}
              quality={100}
              className=""
            />
          </div>
        </div>
      </div> */}
    </div>
  );
};

export default Appetizers;