"use client";
import { Textarea } from "@nextui-org/input";
import { Card } from "@nextui-org/react";
import { useCallback, useState } from "react";
import DOMPurify from "dompurify";
import Script from "next/script";

export default function StaticPageBuilder() {
  const [content, setContent] = useState("");

  const generatedPage = useCallback(() => {
    const sanitizedContent = DOMPurify.sanitize(content);
    return (
      <Card className="rounded-md border p-4">
        <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
      </Card>
    );
  }, [content]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2">
      <div className="flex flex-col gap-2 px-4">
        Editor
        <Textarea
          variant="bordered"
          label=""
          labelPlacement="outside"
          placeholder=""
          className="max-h-[80vh]"
          classNames={{
            mainWrapper: "h-[80vh] overflow-hidden",
            innerWrapper: "h-[80vh] overflow-hidden",
            input: "min-h-full",
            inputWrapper: "h-full",
          }}
          value={content}
          onValueChange={setContent}
          disableAutosize={false}
        />
      </div>
      <div className="px-4 flex flex-col gap-2">
        Preview
        {generatedPage()}
      </div>
    </div>
  );
}