"use client";
import * as React from "react";
import Image from "next/image";
import MenuCard from "../components/ui/MenuCard/MenuCard";
import Product from "../../public/batch1/files_list.json";
import { Button } from "../components/ui/button";
import Modal from "../components/Modal/Modal";
import ClientPortal from "@/components/ClientPortal/ClientPortal";
import styles from "@/styles/Home.module.css";
import { Poppins } from "next/font/google";

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


export default function Home() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [showPortal, setShowPortal] = React.useState(false);
  const handleModal = () => {
    setShowPortal(!showPortal);
  };

  return (
    <main className="flex min-h-screen flex-col px-20 bg-[#F5F5F5">
      {/* Title */}
      <div className="text-4xl w-full justify-center text-center items-center flex flex-col gap-4 py-12 font-medium text-orange-600">
        <span className={`${Popp.className}`}>Kevo&#39;s Attire</span>
        <div className={`${Popp.className} text-orange-600 text-center`}>All sizes - $25</div>
      </div>

      {/* Body */}
      <div className="w-full h-content">
        <MenuCard Menu={Product} />
      </div>

      {/* <div>
        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
        <Modal open={isOpen} onClose={() => setIsOpen(false)}>
          Fancy Modal
        </Modal>
      </div> */}

      {/* Footer */}
      <div className="flex w-full h-[250px] items-center text-gray-400">
        <div className="font-bold ">
          Email us at&nbsp;
          <a href="mailto:kevosattire@gmail.com" className="text-emerald-500">
            kevosattire@gmail.com
          </a>
          &nbsp;to order!
        </div>
        <div></div>
      </div>
    </main>
  );
}