import Cards from "./Cards";
import Head from "./Head";
import List from "./List";

function Sidebar({
  user,
  value,
  isTurnsDetails,
  setIsTurnsDetails,
  setValue,
  isOpenSide,
  setIsOpenSide,
}) {
  return (
    // ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
    <div
      className={` md:block fixed md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%] bg-[#FAFAFA] padding-responsive transition-all duration-700 h-screen md:h-auto pt-[36px] md:pt-0 z-5 top-[48px] sm:top-[52px] md:top-0 md:px-0 ${isOpenSide ? "right-0" : "md:flex -right-full md:right-0"} `}
    >
      <aside
        className="relative md:sticky top-0 h-fit md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
      >
        <div
          className=" pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] "
        >
          <Head user={user} />
          <Cards user={user} />
          <List
            user={user}
            value={value}
            setValue={setValue}
            setIsOpenSide={setIsOpenSide}
            isTurnsDetails={isTurnsDetails}
            setIsTurnsDetails={setIsTurnsDetails}
          />
        </div>
      </aside>
    </div>
  );
}

export default Sidebar;
