import { PropsWithChildren, Suspense, useCallback } from "react";
import { useIsMobile } from "@/hooks/use-is-mobile";
import Drawer from "./drawer";
import Modal from "./modal";
import { ScrollArea, Flex, Loader } from "@mantine/core";

interface SheetProps extends PropsWithChildren {
  title?: string;
  opened: boolean;
  onChange: (next: boolean) => void;
}

const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
  const isMobile = useIsMobile();
  const handleClose = useCallback(() => onChange(false), [onChange]);

  const SheetComponent = isMobile ? Drawer : Modal;

  if (!opened) return null;

  return (
    <SheetComponent
      title={title}
      opened={opened}
      onChange={onChange}
      onClose={handleClose}
    >
      <Suspense fallback={
        <Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
          <Loader size='lg' />
        </Flex>
      }>
        <ScrollArea.Autosize
          style={{ flex: 1, maxHeight: '75dvh' }}
          scrollbarSize={8}
          scrollbars="y"
          type="scroll"
        >
          {children}
        </ScrollArea.Autosize>
      </Suspense>
    </SheetComponent>
  );
};

export default Sheet;