"use client";

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

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

export default function CancelModal({
  isOpen,
  onClose,
  handleCancel,
  title,
  description,
  loading = false,
}: CancelModalProps) {
  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">
              {title}
            </h2>
            <p className="mt-1 text-sm text-neutrals600 dark:text-neutrals300">
              {description}
            </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("button.cancel")}
          />

          <Button
            label={loading ? t("button.processing") : t("button.confirm")}
            type="button"
            onClick={handleCancel}
            variant="outline"
            disabled={loading}
          />
        </div>
      </div>
    </div>
  );
}