'use client';

import { AlertTriangle } from 'lucide-react';

interface UnassignConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  type: 'bike' | 'battery';
  name: string;
  details: string;
  onConfirm: () => void;
}

export default function UnassignConfirmModal({
  isOpen,
  onClose,
  type,
  name,
  details,
  onConfirm
}: UnassignConfirmModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-in fade-in zoom-in-95 duration-200">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-100">
        <div className="p-6 text-center">
          <div className="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-red-100">
            <AlertTriangle className="w-8 h-8 text-red-600 animate-pulse" />
          </div>
          <h3 className="text-lg font-bold text-slate-900 mb-2">Unassign Confirmation</h3>
          <p className="text-sm text-slate-500 mb-6 px-1">
            Are you sure you want to unassign {type} <span className="font-semibold text-slate-800">{name}</span> ({details})?
          </p>
          
          <div className="flex gap-3 justify-center">
            <button
              onClick={onClose}
              className="px-5 py-2.5 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-50 transition-colors flex-1"
            >
              Cancel
            </button>
            <button
              onClick={() => {
                onConfirm();
                onClose();
              }}
              className="px-5 py-2.5 bg-red-600 text-white rounded-xl text-sm font-semibold hover:bg-red-700 hover:shadow-lg transition-all flex-1"
            >
              Unassign
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
