import { Modal, Text, ScrollArea } from "@mantine/core";
import { IconTable } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
import { EmptyState } from "@/components/ui/empty-state.tsx";

interface Props {
  opened: boolean;
  onClose: () => void;
  pageTitle: string;
  pageContent: any;
  isBase?: boolean;
}

export default function TrashPageContentModal({
  opened,
  onClose,
  pageTitle,
  pageContent,
  isBase,
}: Props) {
  const { t } = useTranslation();
  const title = pageTitle || t("Untitled");

  return (
    <Modal.Root size={1200} opened={opened} onClose={onClose} aria-label={t("Preview")}>
      <Modal.Overlay />
      <Modal.Content style={{ overflow: "hidden" }}>
        <Modal.Header>
          <Modal.Title>
            <Text size="md" fw={500}>
              {t("Preview")}
            </Text>
          </Modal.Title>
          <Modal.CloseButton aria-label={t("Close")} />
        </Modal.Header>
        <Modal.Body p={0}>
          <ScrollArea h="650" w="100%" scrollbarSize={5}>
            {isBase ? (
              <EmptyState
                icon={IconTable}
                title={t("Base preview unavailable")}
                description={t("Restore this base to view its contents.")}
              />
            ) : (
              <ReadonlyPageEditor title={title} content={pageContent} />
            )}
          </ScrollArea>
        </Modal.Body>
      </Modal.Content>
    </Modal.Root>
  );
}
