import React, { FC, useState } from "react";
export interface CartBoxNoProgProps {
  boxTitle?: string;
  children?: any;
}

export const CartBoxNoProg: FC<CartBoxNoProgProps> = ({
  boxTitle,
  children,
}) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  return (
    <div className="relative w-full rounded-[10px] bg-white py-20 2xl:py-20-2xl swiper-custom-layout">
      <div
        className={`relative flex justify-between px-20 2xl:px-20-2xl ${
          isOpen ? "mb-[17.5px] 2xl:mb-[1.215vw]}" : null
        }`}
      >
        <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 ">{children}</div>
      )}
    </div>
  );
};