"use client";

import { Documento } from "@/types/document";
import { TbAlertTriangle } from "react-icons/tb";

interface DeleteConfirmationModalProps {
  isOpen: boolean;
  documento: Documento | null;
  isDeleting: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

export default function DeleteConfirmationModal({
  isOpen,
  documento,
  isDeleting,
  onClose,
  onConfirm,
}: DeleteConfirmationModalProps) {
  if (!isOpen || !documento) return null;

  return (
    <div className="fixed inset-0 bg-overlay flex items-center justify-center z-50 p-4">
      <div className="bg-background border border-border-subtle rounded-lg shadow-xl p-6 max-w-sm w-full">
        <div className="flex items-start gap-4">
          <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-destructive-background sm:mx-0">
            <TbAlertTriangle className="h-6 w-6 text-destructive" aria-hidden="true" />
          </div>
          <div>
            <h2 className="text-lg font-bold text-text">Eliminar Documento</h2>
            <p className="mt-2 text-sm text-text-muted">
              ¿Estás seguro de que deseas eliminar el documento{" "}
              <span className="font-semibold">{documento.fileName}</span>? Esta
              acción no se puede deshacer.
            </p>
          </div>
        </div>

        <div className="mt-6 flex justify-end gap-4">
          <button
            onClick={onClose}
            className="cursor-pointer px-4 py-2 text-sm font-semibold text-text bg-background-alt rounded-md hover:bg-border-subtle focus-ring"
          >
            Cancelar
          </button>
          <button
            onClick={onConfirm}
            disabled={isDeleting}
            className="cursor-pointer px-4 py-2 text-sm font-semibold text-destructive-foreground bg-destructive rounded-md hover:bg-destructive-hover disabled:opacity-50 focus-ring"
          >
            {isDeleting ? "Eliminando..." : "Eliminar"}
          </button>
        </div>
      </div>
    </div>
  );
}