'use client';

const PRIMARY = '#B22698';
const DARK = '#212121';

interface Props {
  caseNumber: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function DeleteConfirmModal({ caseNumber, onConfirm, onCancel }: Props) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <div className="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4" style={{ background: '#FFEBEE' }}>
          <i className="ri-delete-bin-line text-2xl" style={{ color: '#C62828' }}></i>
        </div>
        <h3 className="text-lg font-bold text-center mb-2" style={{ color: DARK }}>Delete Case</h3>
        <p className="text-sm text-gray-500 text-center mb-1">
          Are you sure you want to delete case
        </p>
        <p className="text-sm font-bold text-center mb-4 font-mono" style={{ color: PRIMARY }}>{caseNumber}</p>
        <p className="text-xs text-gray-400 text-center mb-6">This action cannot be undone. The case record will be permanently removed.</p>
        <div className="flex gap-3">
          <button onClick={onCancel}
            className="flex-1 py-2.5 rounded-xl border-2 text-sm font-semibold cursor-pointer whitespace-nowrap hover:bg-gray-50"
            style={{ borderColor: '#e5e7eb', color: '#555' }}>
            Cancel
          </button>
          <button onClick={onConfirm}
            className="flex-1 py-2.5 rounded-xl text-sm font-semibold text-white cursor-pointer whitespace-nowrap"
            style={{ background: '#C62828' }}>
            Delete Case
          </button>
        </div>
      </div>
    </div>
  );
}