import { Copy, Download, AlertTriangle } from "lucide-react";
import { ReactNode } from "react";

interface ResultPreviewComponentProps {
  outputText: string;
  copyToClipboard: () => void;
  downloadText: () => void;
  highlightEntities: (text: string) => ReactNode;
}

export const ResultPreviewComponent = ({
  outputText,
  copyToClipboard,
  downloadText,
  highlightEntities,
}: ResultPreviewComponentProps) => {
  if (!outputText) return null;

  return (
    <div className="mt-8 space-y-4">
      <div className="flex items-center justify-between border-b border-[#f7ab6e] border-opacity-30 pb-2">
        <h3 className="text-lg font-medium text-[#092727]">
          Document anonymisé
        </h3>
        <div className="flex items-center gap-2">
          <button
            onClick={copyToClipboard}
            disabled={!outputText}
            className="p-2 text-[#092727] hover:text-[#f7ab6e] disabled:opacity-50"
            title="Copier"
          >
            <Copy className="h-4 w-4" />
          </button>

          <button
            onClick={downloadText}
            disabled={!outputText}
            className="p-2 text-[#092727] hover:text-[#f7ab6e] disabled:opacity-50"
            title="Télécharger"
          >
            <Download className="h-4 w-4" />
          </button>
        </div>
      </div>

      <div className="border border-[#f7ab6e] border-opacity-30 rounded-lg bg-white min-h-[400px] flex flex-col">
        <div className="flex-1 p-4 overflow-hidden">
          <div className="h-full min-h-[300px] text-[#092727] whitespace-pre-wrap overflow-y-auto">
            <div className="leading-relaxed">
              {highlightEntities(outputText)}
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-[#f7ab6e] border-opacity-30">
          <div className="flex items-start gap-2 p-2 bg-[#f7ab6e] bg-opacity-10 rounded-md">
            <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
            <p className="text-sm text-[#092727]">
              Vérifiez le résultat pour vous assurer que toutes les informations
              privées sont supprimées et éviter une divulgation accidentelle.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};