import { Check } from 'lucide-react'
import { Button, Modal } from '../../../components/ui'
import { useGroupDetail } from './GroupDetailProvider'

export function BulkCapacityModal() {
  const {
    isBulkCapacityModalOpen,
    closeBulkCapacityModal,
    confirmBulkImportOverCapacity,
    validRowsCount,
    attendeesTotal,
    group,
  } = useGroupDetail()

  return (
    <Modal
      isOpen={isBulkCapacityModalOpen}
      onClose={closeBulkCapacityModal}
      title="Aviso de cupo"
      description="La carga supera el cupo del grupo."
      maxWidth="md"
    >
      <div className="space-y-4">
        <p className="text-sm text-foreground/70">
          Estás por importar <strong className="text-primary">{validRowsCount}</strong> miembro(s), pero el
          grupo ya tiene <strong className="text-primary">{attendeesTotal}</strong> inscrito(s) y su cupo es
          de <strong className="text-primary">{group?.capacity}</strong>. ¿Deseas importarlos de todos modos?
        </p>
        <div className="flex items-center justify-end gap-2.5 pt-2">
          <Button variant="ghost" onClick={closeBulkCapacityModal}>
            Cancelar
          </Button>
          <Button variant="primary" onClick={confirmBulkImportOverCapacity} className="gap-2">
            <Check className="size-4" />
            Importar de todos modos
          </Button>
        </div>
      </div>
    </Modal>
  )
}