import { useState } from "react";

import Links from "./Links";
import HeadMd from "./HeadMd";
import HeadSm from "./HeadSm";
import { Button } from "@mui/material";
import LogoutOrangeP from "@/components/icons/LogoutOrangeP";

function Sidebar({ active, setActive }) {

  const [open, setOpen] = useState(false);

  return (
    <div className={`
        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
        ${active ? ' right-0' : 'right-[-85%]'}
        ${open ? 'min-w-[243px]' : 'min-w-[96px]'}
    `}>
      <aside className={`
        relative h-screen overflow-hidden 
        transition-all duration-500 w-[85%] md:w-fit
        ${active ? ' right-0' : 'right-[-85%]'}
        ${open ? 'w-[243px]' : 'w-[96px]'}
      `}>
        <div className={`
           z-30
          md:top-0 md:right-0 w-[85%] md:w-fit
        ${active ? ' right-0' : 'right-[-85%]'}
          overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
          border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
          transition-all duration-700
          ${open ? 'md:w-[243px]' : 'md:w-[96px]'}
        `}>
          <div className="w-full">
            <HeadMd open={open} setOpen={setOpen} />
            <HeadSm setActive={setActive} />
            <Links open={open} />
          </div>
          <div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
            <Button
              variant="text"
              className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
            >
              <LogoutOrangeP />
              خروج از حساب
            </Button>
          </div>
        </div>
      </aside>
    </div>
  )
}

export default Sidebar