// frontend/src/modals/devices/DeleteDeviceModal.jsx
import Modal from '@/components/ui/Modal'
import Button from '@/components/ui/Button'

export default function DeleteDeviceModal({ device, onConfirm, onCancel, error }) {
  const name = device?.device_name || 'this device'
  const serial = device?.serial_number || device?.device_id

  return (
    <Modal
      open={!!device}
      onClose={onCancel}
      title="Delete Device"
      size="sm"
      footer={
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-3)' }}>
          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
          <Button variant="danger" onClick={onConfirm}>Delete Device</Button>
        </div>
      }
    >
      <p style={{ color: 'var(--color-text-secondary)', lineHeight: 'var(--line-height-relaxed)' }}>
        Are you sure you want to delete{' '}
        <strong style={{ color: 'var(--color-text-primary)' }}>{name}</strong>
        {serial && <> ({serial})</>}?
      </p>
      <p style={{ marginTop: 'var(--space-2)', fontSize: 'var(--font-size-sm)', color: 'var(--color-text-muted)' }}>
        This action cannot be undone.
      </p>
      {error && (
        <p
          style={{
            marginTop: 'var(--space-3)',
            fontSize: 'var(--font-size-sm)',
            color: 'var(--color-danger)',
            backgroundColor: 'var(--color-danger-bg)',
            padding: 'var(--space-2) var(--space-3)',
            borderRadius: 'var(--radius-sm)',
          }}
        >
          {error}
        </p>
      )}
    </Modal>
  )
}
