import { useResourceStore } from '@/pages/store/resource';
import { useResourceFileStore } from '@/pages/store/resource-file';
import { Drawer } from '@mui/material';

export const FileDrawer = () => {
  const { prefix } = useResourceStore();
  const { resource, openDrawer, setOpenDrawer } = useResourceFileStore();
  return (
    <Drawer open={openDrawer} onClose={() => setOpenDrawer(false)} anchor='right' {...(!openDrawer && { inert: true })}>
      <div className='p-4 w-[600px]'>
        <h2 className='text-2xl font-bold'>{resource?.name ? resource.name.replace(prefix, '') : resource?.prefix?.replace(prefix, '')}</h2>
        <pre className='flex flex-col gap-2'>{JSON.stringify(resource, null, 2)}</pre>
      </div>
    </Drawer>
  );
};
