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

      <div
        className={twMerge(
          'absolute left-[88px] top-[104px] z-10 h-calc-drawer w-[432px] -translate-x-full transform bg-white-pearl text-font-500 transition-all duration-500',
          open && 'translate-x-0',
        )}
        role={drawerRole}
      >
        <div className="flex items-center justify-between border-b border-b-divide px-6 py-8 text-xl">
          <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>
    </>
  );
};