"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 Bar = () => {
  let pic = "cover";
  return (
    <main>
      <div className="flex flex-wrap gap-8">
        {Menu.map((menu_item) => {
          return (
            <Card key={menu_item.id} className="flex flex-grow flex-col w-[325px] h-[452px]">
              <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="w-full font-sans">
                  {/* title and photo */}
                  <div className="inline-block">
                    <h4 className={`pt-2 float-left ${interBold.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>
                  {/* paragraph text */}
                  <div className="inline-block text-left">
                    <p className="max-w-[75ch]">
                      {menu_item.description}
                    </p>
                    {/* 16px line height */}
                    <p className="leading-4 text-[#8F8F8F]">
                      {menu_item.description}
                    </p>
                  </div>
                </div>
                {/* cart addon */}
                <div className="flex flex-row">
                  <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>
              </div>
            </Card>
          );
        })}
      </div>
    </main>
  );
};

export default Bar;