// components/MarkdownModal.tsx

import { X } from "lucide-react";

interface HtmlModalProps {
  content: string | null;
  onClose: () => void;
}

export default function MarkdownModal({ content, onClose }: HtmlModalProps) {
  if (!content) return null;

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-4"
      onClick={onClose}
    >
      <div
        className="bg-[#061717] border-4 border-white shadow-[10px_10px_0_0_black] w-full max-w-3xl h-[80vh] flex flex-col relative"
        onClick={(e) => e.stopPropagation()}
      >
        <header className="flex items-center justify-between p-4 border-b-4 border-white">
          <h3 className="text-lg font-black text-white uppercase">
            Aperçu du Document
          </h3>
          <button
            onClick={onClose}
            className="p-2 bg-[#F7AB6E] text-white border-2 border-white shadow-[3px_3px_0_0_black] hover:shadow-[1px_1px_0_0_black] active:shadow-none active:translate-x-0.5 active:translate-y-0.5"
          >
            <X className="h-5 w-5" />
          </button>
        </header>

        {/* Ce conteneur stylise le HTML propre qu'il reçoit */}
        <div
          className="preview-content p-6 overflow-y-auto w-full h-full"
          dangerouslySetInnerHTML={{ __html: content }}
        />
      </div>
    </div>
  );
}