import { AlertTriangle } from 'lucide-react'
import Modal from './Modal'
import { Button } from './controls'

/** Confirmation destructive — remplace `window.confirm`. */
export default function ConfirmDialog({
  title = 'Confirmer',
  message,
  confirmLabel = 'Confirmer',
  cancelLabel  = 'Annuler',
  danger  = false,
  loading = false,
  onConfirm,
  onCancel,
}) {
  return (
    <Modal
      size="sm"
      title={title}
      onClose={onCancel}
      bodyClassName="overflow-y-auto px-5 py-5"
      icon={
        <div className={`p-2 rounded-xl flex-shrink-0 ${danger ? 'bg-red-500/15' : 'bg-indigo-500/15'}`}>
          <AlertTriangle size={16} className={danger ? 'text-red-400' : 'text-indigo-400'} />
        </div>
      }
      footer={
        <div className="flex gap-2 justify-end">
          <Button variant="outline" onClick={onCancel} disabled={loading}>
            {cancelLabel}
          </Button>
          <Button variant={danger ? 'danger' : 'primary'} onClick={onConfirm} loading={loading} autoFocus>
            {confirmLabel}
          </Button>
        </div>
      }
    >
      <div className="text-sm text-gray-400 leading-relaxed">{message}</div>
    </Modal>
  )
}
