import { AlignLeft, AlignRight } from 'lucide-react';
import { useContext } from 'react';
import OpenContext from '../Context/openContext/OpenContext';

const Header = () => {
    const { setRightPanelOpen, setLeftPanelOpen } = useContext(OpenContext);

    return (
        <div className='bg-[#f2e6f8] fixed top-0 w-[60px] z-[900] min-w-full flex items-center p-4 shadow-md'>

            <p className='mr-auto flex-wrap gap-1 cursor-pointer text-xs items-center font-semibold xl:flex lg:flex md:flex hidden' onClick={() => setLeftPanelOpen(true)}><AlignLeft /><span className='hidden xl:block lg:block md:block sm:block'>Add Element</span></p>

            <h1 className='font-semibold'>PlanPostAi Canvas</h1>

            <p className='ml-auto flex-wrap gap-1 cursor-pointer text-xs items-center font-semibold xl:flex lg:flex md:flex hidden' onClick={() => setRightPanelOpen(true)}> <span className='hidden xl:block lg:block md:block sm:block'>Edit Panel</span><AlignRight /></p>

        </div>
    )
}

export default Header