'use client'

import { X } from 'lucide-react'
import type { Application } from '@/lib/api/types'
import './ApplicationFormModal.css'

interface DeleteConfirmModalProps {
  app: Application
  onConfirm: () => void
  onClose: () => void
}

export function DeleteConfirmModal({ app, onConfirm, onClose }: DeleteConfirmModalProps) {
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal modal-sm" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <p>Confirm deletion</p>
            <h2>Delete {app.id}</h2>
          </div>
          <button className="icon-button" onClick={onClose}>
            <X size={18} />
          </button>
        </div>
        <div className="modal-body">
          <p style={{ margin: 0, color: '#53636e', fontSize: 13, lineHeight: 1.6 }}>
            Are you sure you want to delete <b>{app.jobTitle}</b> at {app.location}? This action
            cannot be undone.
          </p>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>
            Cancel
          </button>
          <button className="btn danger" onClick={onConfirm}>
            Delete
          </button>
        </div>
      </div>
    </div>
  )
}