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 ${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] 
                ${open ? '!rotate-180' : '!rotate-0 !ml-[7px]'}`}
            >
                <DoubleArrowLeftP />
            </Button>
        </div>
    )
}

export default HeadMd