import dynamic from 'next/dynamic';
import { twMerge } from 'tailwind-merge';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { DRAWER_ROLE } from '@/components/Map/Drawer/Drawer.constants';
import { drawerSelector } from '@/redux/drawer/drawer.selectors';

const SearchDrawerContent = dynamic(
  async () =>
    import('@/components/Map/Drawer/SearchDrawerContent').then(
      module => module.SearchDrawerContent,
    ),
  {
    ssr: false,
  },
);

export const Drawer = (): JSX.Element => {
  const { isOpen, drawerName } = useAppSelector(drawerSelector);

  return (
    <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',
        isOpen && 'translate-x-0',
      )}
      role={DRAWER_ROLE}
    >
      {isOpen && drawerName === 'search' && <SearchDrawerContent />}
      {/* other drawers comes here, should use dynamic import */}
    </div>
  );
};