"use client";

import { useTranslations } from "next-intl";
import Button from "../Button";

interface ConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  description?: string;
  loading?: boolean;
}

export default function NOtificationDeleteConfirmModal({
  isOpen,
  onClose,
  onConfirm,
  loading = false,
}: ConfirmModalProps) {
  if (!isOpen) return null;

  const t = useTranslations();

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
      >
        <div className="flex items-start gap-3 mb-4">
          <div className="flex-shrink-0 mt-1">
            <svg
              className="w-6 h-6 text-red-500"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 9v2m0 4h.01M5.07 19H18.93a2 2 0 001.78-2.9l-6.93-12a2 2 0 00-3.56 0l-6.93 12a2 2 0 001.78 2.9z"
              />
            </svg>
          </div>

          <div>
            <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
              {t("confirm_deletion")}
            </h2>
            <p className="mt-1 text-sm text-neutrals600 dark:text-neutrals300">
              {t("confirm_deletion_message")}
            </p>
          </div>
        </div>

        <hr className="my-4 border-t border-neutrals200 dark:border-neutrals700" />

        <div className="flex justify-end gap-3">
          <Button variant="outline" onClick={onClose} label={t("dashboard.cancel")} />
          <Button
            label={loading ? t("deleting") : t("delete")}
            onClick={onConfirm}
            variant="outline"
            disabled={loading}
          />
        </div>
      </div>
    </div>
  );
}