import { useState } from 'react';
import { Button } from '@/shared/Button';
import { twMerge } from 'tailwind-merge';
import { IconButton } from '@/shared/IconButton';

const drawerRole = 'drawer';
const closeButtonRole = 'close-drawer-button';

export const Drawer = (): JSX.Element | null => {
  const [open, setOpenDrawer] = useState(false);

  return (
    <>
      <Button
        className="absolute top-[110px] left-[100px] z-10 peer"
        onClick={(): void => setOpenDrawer(true)}
      >
        Open Drawer
      </Button>

      <div
        className={twMerge(
          'absolute top-[104px] left-[88px] z-10 w-[432px] h-calc-drawer bg-white-pearl text-font-500 transition-all duration-500 transform -translate-x-full',
          open && 'translate-x-0',
        )}
        role={drawerRole}
      >
        <div className="flex justify-between items-center text-xl px-6 py-8 border-b border-b-divide">
          <div>
            <span className="font-normal">Search: </span>
            <span className="font-semibold">NADH</span>
          </div>
          <IconButton
            className="bg-white-pearl"
            classNameIcon="fill-font-500"
            icon="close"
            role={closeButtonRole}
            onClick={(): void => setOpenDrawer(false)}
          />
        </div>
      </div>
    </>
  );
};