"use client";
import * as React from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Menu from "./items.json";
import Image from "next/image";
import localFont from "next/font/local";

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

const Bar = () => {
  let pic = "cover";
  return (
    <main>
      <div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-flow-row gap-y-6 md:gap-x-6">
        {Menu.map((menu_item) => {
          return (
            <Card
              key={menu_item.id}
              className="flex-1 flex-col max-w-[325px] h-[452px] relative"
            >
              <div className="w-full h-[55%]">
                <div className="h-full relative w-full">
                  <Image
                    src={`/${menu_item.photo}`}
                    alt="chili pepper spice"
                    fill
                    style={{ objectFit: "cover", objectPosition: "center" }}
                    quality={100}
                    className="rounded-t-lg"
                  />
                </div>
              </div>
              <div className="m-[8px] space-y-[4px]">
                {/* title and description of item  */}
                <div className="flex flex-col w-full font-sans">
                  {/* title and photo */}
                  <div className="inline-block">
                    <h4 className={`pt-2 float-left ${extraBold.className}`}>
                      <strong>{menu_item.name}</strong>
                    </h4>
                    {/* <div className="bg-red-300 float-right relative w-[25px] h-[25px]">
                      <Image
                        src="/red-chili-pepper.svg"
                        alt="chili pepper spice"
                        fill
                        style={{
                          objectFit: "contain",
                        }}
                        quality={100}
                        className=""
                      />
                    </div> */}
                  </div>
                  {/* description text */}
                  <div className="inline-block text-left pt-2">
                    <p
                      className={`max-w-[75ch] ${interBold.className} leading-tight font-[12px] text-[#D7D7D7]`}
                    >
                      {menu_item.description}
                    </p>
                  </div>
                </div>
              </div>
              {/* cart addon */}
              <div className="flex flex-row bottom-0 absolute m-2">
                <div className="flex flex-row">
                  <strong>{`$${menu_item.price}`}</strong>
                </div>
                <div className="flex  w-1/2 relative">
                  <div className="flex  w-3 h-full items-end justify-end">
                    <div className=""></div>
                  </div>
                </div>
              </div>
            </Card>
          );
        })}
      </div>
    </main>
  );
};

export default Bar;