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";

const Bar = () => {
  return (
    <main>
      {/* 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 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  justify-evenly">
                <div className=" flex flex-row">
                  <span>{`$${menu_item.price}`}</span>
                </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>
          );
        })}
      </div> */}
      <div>
        {Menu.map((menu_item) => {
          return (
                <Card key={menu_item.id} className="flex flex-wrap gap-8 pt-6 justify-evenly w-[325px] h-[452px]">
                  <CardHeader className="h-full 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"
                    />
                  </CardHeader>
                  <h4 className="">
                    <strong>{menu_item.name}</strong>
                  </h4>
                  <p className="max-w-[75ch]">
                    Description: {menu_item.description}
                  </p>
                  <div className="flex flex-row  justify-evenly">
                    <div className=" flex flex-row">
                      <span>{`$${menu_item.price}`}</span>
                    </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;