"use client";

import { RefreshCcw, Trash2 } from "lucide-react";
import type { Lang } from "@/lib/config";
import type { WaitlistTranslations } from "./types";

interface DeleteConfirmModalProps {
  lang: Lang;
  t: WaitlistTranslations;
  onConfirm: () => void;
  onClose: () => void;
  submitting: boolean;
}

export function DeleteConfirmModal({
  lang,
  t,
  onConfirm,
  onClose,
  submitting,
}: DeleteConfirmModalProps) {
  const isAr = lang === "ar";

  return (
    <div className="fixed inset-0 bg-slate-900/20 backdrop-blur-sm flex items-center justify-center z-[100] p-4">
      <div
        className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden border border-slate-200"
        dir={isAr ? "rtl" : "ltr"}
      >
        <div className="p-6 text-center">
          <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <Trash2 className="w-6 h-6 text-red-600" />
          </div>
          <h3 className="text-lg font-bold text-slate-900 mb-2">
            {t.deleteConfirmTitle}
          </h3>
          <p className="text-slate-500 mb-6">{t.deleteConfirmMessage}</p>
          <div className="flex gap-3">
            <button
              onClick={onClose}
              className="flex-1 px-4 py-2.5 border border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 transition-colors font-medium"
            >
              {t.cancel}
            </button>
            <button
              onClick={onConfirm}
              disabled={submitting}
              className="flex-1 px-4 py-2.5 bg-red-600 text-white rounded-xl hover:bg-red-700 disabled:opacity-50 transition-colors font-semibold"
            >
              {submitting ? (
                <RefreshCcw className="w-5 h-5 animate-spin mx-auto" />
              ) : (
                t.delete
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}