"use client";

import Modal from "@/components/Modal";
import { useTranslations } from "next-intl";

interface RemovePractitionerModalProps {
  isOpen: boolean;
  onClose: () => void;
  onRemove?: () => void;
  practitionerName?: string;
}

export default function RemovePractitionerModal({
  isOpen,
  onClose,
  onRemove,
  practitionerName,
}: RemovePractitionerModalProps) {
  const t = useTranslations("practiceManager");
  const handleRemove = () => {
    if (onRemove) {
      onRemove();
    }
    onClose();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="md">
      <div className="p-8 py-12 flex flex-col items-center text-center">
        {/* Icon */}
        <div className="mb-8 relative">
          <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
            {/* Main circle */}
            <circle cx="60" cy="50" r="40" stroke="#1a1a1a" strokeWidth="3" fill="none" />
            {/* Head */}
            <circle cx="60" cy="35" r="12" stroke="#1a1a1a" strokeWidth="3" fill="none" />
            {/* Body */}
            <path
              d="M40 75 C40 60, 50 55, 60 55 C70 55, 80 60, 80 75"
              stroke="#1a1a1a"
              strokeWidth="3"
              fill="none"
            />
            {/* Collar/tie */}
            <path
              d="M55 55 L60 65 L65 55"
              stroke="#1a1a1a"
              strokeWidth="2"
              fill="none"
            />
            {/* Smile */}
            <path
              d="M55 40 Q60 45 65 40"
              stroke="#3B9EC9"
              strokeWidth="2"
              fill="none"
              strokeLinecap="round"
            />
            {/* X badge circle */}
            <circle cx="85" cy="75" r="18" fill="white" stroke="#3B9EC9" strokeWidth="3" />
            {/* X mark */}
            <path
              d="M78 68 L92 82 M92 68 L78 82"
              stroke="#1a1a1a"
              strokeWidth="3"
              strokeLinecap="round"
            />
          </svg>
        </div>

        {/* Title */}
        <h2 className="text-2xl font-bold text-red-500 mb-4">
          {t("modals.removePractitioner.title")}
        </h2>

        {/* Description */}
        <p className="text-gray-500 text-lg max-w-md mb-8">
          {t("modals.removePractitioner.description")}
        </p>

        {/* Buttons */}
        <div className="flex items-center gap-4">
          <button
            onClick={onClose}
            className="px-10 py-3.5 bg-white text-gray-600 font-medium rounded-full border border-gray-300 hover:bg-gray-50 transition focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2"
          >
            {t("modals.removePractitioner.close")}
          </button>
          <button
            onClick={handleRemove}
            className="px-10 py-3.5 bg-red-500 text-white font-medium rounded-full hover:bg-red-600 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
          >
            {t("modals.removePractitioner.remove")}
          </button>
        </div>
      </div>
    </Modal>
  );
}