import { PropsWithChildren, useCallback } from "react";
import { useIsMobile } from "@/hooks/use-is-mobile";
import Drawer from "./drawer";
import Modal from "./modal";
import { ScrollArea } 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;

  return (
    <SheetComponent
      title={title}
      opened={opened}
      onChange={onChange}
      onClose={handleClose}
    >
      <ScrollArea.Autosize
        style={{ flex: 1, maxHeight: '75dvh' }}
        scrollbarSize={8}
        scrollbars="y"
        type="scroll"
      >
        {children}
      </ScrollArea.Autosize>
    </SheetComponent>
  );
};

export default Sheet;