import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";

type CodeDialogProps = {
  /**
   * The title of the dialog.
   */
  title: string;

  /**
   * The description of the dialog.
   */
  description: string;

  /**
   * The code to show in the dialog.
   */
  code: string;

  /**
   * The children for this element.
   */
  children: React.ReactNode;
};

export function CodeDialog({ title, description, code, children }: CodeDialogProps): ReactElement {
  return (
    <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="max-h-[700px]">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <SyntaxHighlighter
          language="javascript"
          style={atelierSeasideDark}
          customStyle={{
            maxHeight: "600px",
          }}
        >
          {code}
        </SyntaxHighlighter>
      </DialogContent>
    </Dialog>
  );
}