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

interface Props {
  onCancel: () => void;
  onConfirm: () => void;
  isLoading?: boolean;
}

export default function DeleteConfirmModal({
  onCancel,
  onConfirm,
  isLoading,
}: Props) {
  const t = useTranslations();
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
      <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("dashboard.delete_confirm")}
            </h2>
            <p className="mt-1 text-sm text-neutrals600 dark:text-neutrals300">
              {t("dashboard.delete_desc")}
            </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={onCancel} label="Cancel" />
          <Button
            label={isLoading ? t("deleting") : t("delete")}
            onClick={onConfirm}
            disabled={isLoading}
            variant="outline"
          />
        </div>
      </div>
    </div>
  );
}