"use client";
import * as React from "react";
import Image from "next/image";
import localFont from "next/font/local";
import { Inter } from "next/font/google";
import { Card } from "../card";
import Modal from "../../Modal/Modal";
import { Poppins } from "next/font/google";

const Popp = Poppins({ weight: "400", subsets: ["latin"] });

// const interBold = localFont({
//   src: "./Inter-Bold.woff",
//   display: "swap",
// });
// const extraBold = localFont({
//   src: "./Inter-ExtraBold.woff",
//   display: "swap",
// });
// const inter = Inter({ subsets: ["latin"] });

const MenuCard = ({ Menu }: any) => {
  return (
    <div className="grid qhd:grid-cols-5 desktop:grid-cols-4 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row gap-y-6 md:gap-x-6 ">
      {Menu.map((menu_item: any) => {
        return (
          <Card
            key={menu_item.id}
            className="flex-1 flex-col max-w-[325px] h-[400px] relative overflow-hidden bg-white/10 border-none hover:scale-150 transition hover:z-50 backdrop-blur-xl"
          >
            <div className="w-full h-[75%]">
              <div className="h-full relative w-full">
                <Image
                  src={`/${menu_item.photo}`}
                  alt="product photo"
                  fill
                  style={{ objectFit: "cover", objectPosition: "center" }}
                  quality={75}
                  sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  className="flex"
                />
              </div>
            </div>
            <div className="m-[8px] space-y-[4px]">
              {/* title and description of item  */}
              <div className="flex flex-col w-full font-sans text-center">
                {/* title and photo */}
                <div className="flex flex-col items-center justify-center text-start">
                  <h4
                    className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-[#EEEEEE]`}
                  >
                    <span>{menu_item.description}</span>
                  </h4>
                  <div className="right-2 absolute h-[25px] flex flex-row w-1/4 mt-2 text-[#7B9922]">
                    {menu_item.inStock === "yes" ? (
                      <span>In Stock!</span>
                    ) : (
                      <span className="text-orange-600">Out of Stock</span>
                    )}
                    {/* Check if item is a favorite */}
                    {menu_item.favorite === "yes" ? (
                      <Image
                        src="/star.svg"
                        alt="jefe's star"
                        fill
                        style={{
                          objectFit: "contain",
                          objectPosition: "right",
                        }}
                        quality={100}
                        sizes="(max-width: 25px) 100vw, (max-width: 325px) 50vw, 33vw"
                        className="flex"
                      />
                    ) : (
                      <div className="hidden"></div>
                    )}
                  </div>
                </div>
                {/* description text */}
                {/* <div className="inline-block text-left pt-2">
                  <p
                    className={`max-w-[75ch] ${Popp.className} leading-tight font-[12px] text-blue-400 `}
                  >
                    {menu_item.description}
                  </p>
                </div> */}
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
};

export default MenuCard;
