import clsx from "clsx";
import { ReactNode, useState } from "react";
import { renderSanitizedMarkdown } from "~/utils/html-sanitizer";
import ButtonSecondary from "../buttons/ButtonSecondary";
import Modal from "../modals/Modal";
import { useTranslation } from "react-i18next";

export default function ShowHtmlModalButton({
  html,
  title,
  link,
  size,
}: {
  html: string | undefined | null;
  title: React.ReactNode;
  link?: {
    href: string;
    target?: undefined | "_blank";
    text?: ReactNode;
  };
  className?: string;
  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="flex space-x-2">
        <button type="button" disabled={!html} onClick={() => setOpen(true)} className={clsx(html && "underline")}>
          {title}
        </button>
      </div>

      <Modal size={size} open={open} setOpen={setOpen}>
        <div>
          <div className="flex items-center justify-between space-x-2">
            <div className="text-text-neutral-primary text-lg font-medium">{title ?? t("shared.details")}</div>
            {link && (
              <ButtonSecondary className="group" to={link.href} target={link.target}>
                {link.text}
              </ButtonSecondary>
            )}
          </div>
          <div className="h-[calc(100vh-10rem)] overflow-y-auto">
            <div className="prose border-border-default mt-2 border-t pt-2">
              <div
                dangerouslySetInnerHTML={{
                  __html: renderSanitizedMarkdown(html),
                }}
              />
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
}