import React, { FC, useState } from "react";
import ProgressBar from "../../ProgressBar/index";
// import classNames from "classnames";
export interface CartBoxProps {
  boxTitle?: string;
  // children?: any;
  validPrice?: number;
  maxPrice?: number;
}

export const CartBox: FC<CartBoxProps> = (
  props: any,
  {
    // children,
    validPrice,
    boxTitle,
    maxPrice,
  }
) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const perce = (Number(validPrice) * 100) / Number(maxPrice);
  console.log(props.chilldren);
  return (
    <div className="relative w-full rounded-[10px] bg-white py-20 2xl:py-20-2xl swiper-custom-layout flex flex-col">
      <div className="relative flex justify-between px-20 2xl:px-20-2xl mb-[17.5px] 2xl:mb-[1.215vw]">
        <div className="text-utility-large tracking-[0.08em] 2xl:text-utility-large-2xl w-[80%]">
          {boxTitle}
        </div>
        <button
          className=" text-utility-large text-end tracking-[0.08em] 2xl:text-utility-large-2xl"
          onClick={() => setIsOpen(!isOpen)}
        >
          {!isOpen ? "Show" : "Hide"}
        </button>
      </div>
      {isOpen ? (
        <div className="bg-white px-20 w-full 2xl:px-20-2xl ">
          {props.children}
        </div>
      ) : Number(validPrice) >= Number(maxPrice) ? (
        <div className="bg-white px-20 w-full 2xl:px-20-2xl text-body-text">
          <p>You can buy</p>
          <ProgressBar width={perce} />
        </div>
      ) : (
        <div className="bg-white px-20 w-full 2xl:px-20-2xl text-body-text">
          <p>You are ${10} away from this free gift!</p>
          <ProgressBar width={perce} />
        </div>
      )}
    </div>
  );
};