import { AM, EC, GA, US, GD, GB } from "country-flag-icons/react/1x1";
import { ProductBoxProps } from "../../types/props";
import Button from "../button";
import { useState } from "react";
import MuiModalBuy from "./components/MuiModalBuy";

const ProductBox = ({
  title,
  space,
  users,
  price,
  btnText,
  variant,
}: ProductBoxProps) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const toggleModal = () => {
    setIsOpen(true);
  };
  return (
    <div
      className={`p-4 w-full h-full flex flex-col gap-3 justify-center items-center rounded-lg shadow-inner ${
        variant === 1
          ? "shadow-purple-800 bg-purple-600"
          : variant === 2
          ? "shadow-orange-800 bg-orange-600"
          : variant === 3 && "shadow-indigo-800 bg-indigo-600"
      } bg-cover bg-center bg-banner`}
    >
      <MuiModalBuy isOpen={isOpen} setIsOpen={setIsOpen} />
      <h1 className="max-md:text-xl md:text-2xl font-bold">{title}</h1>
      <div className="w-full h-full p-2 flex gap-2 justify-between items-center">
        <div className="w-full h-full flex flex-col gap-2">
          <h2 className="max-md:text-lg md:text-xl text-center">{space} گیگ</h2>
          <p className="max-md:text-sm md:text-lg text-center">
            {users} کاربره
          </p>
        </div>
        <div className="w-full h-full gap-4 grid grid-cols-3">
          <GA className="w-5 lg:w-7 rounded-md" />
          <US className="w-5 lg:w-7 rounded-md" />
          <EC className="w-5 lg:w-7 rounded-md" />
          <AM className="w-5 lg:w-7 rounded-md" />
          <GB className="w-5 lg:w-7 rounded-md" />
          <GD className="w-5 lg:w-7 rounded-md" />
        </div>
      </div>
      <div className="w-full h-full bg-purple-950 text-center rounded-lg md:text-xl font-bold shadow-inner shadow-purple-600 px-4 py-2">
        {price} تومان
      </div>
      <div className="w-full h-full grid grid-cols-1">
        <Button
          extra="shadow-inner shadow-gray-400"
          onClick={() => toggleModal()}
        >
          {btnText}
        </Button>
      </div>
    </div>
  );
};

export default ProductBox;