import DoubleArrowLeftP from "@/components/icons/DoubleArrowLeftP";
import LogoPanel from "@/components/icons/LogoPanel";
import { Button } from "@mui/material";
import Link from "next/link";
import React from "react";

function HeadMd({ open, setOpen }) {
  return (
    <div
      className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}
    >
      <Link
        href="/panel/dashboard"
        className={`flex justify-center transition-all duration-500 logo-sidebar ${
          open ? "max-w-full" : "max-w-0"
        }`}
      >
        <LogoPanel />
      </Link>
      <Button
        onClick={() => setOpen(!open)}
        className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
          !transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320]  dark:!bg-[#222433] dark:!border-[#343645]
        ${open ? "!rotate-180" : "!rotate-0 !ml-[7px]"}`}
      >
        <DoubleArrowLeftP />
      </Button>
    </div>
  );
}

export default HeadMd;