'use client'

import * as React from 'react'
import { Loader2 } from 'lucide-react'
import { BaseDialog } from './BaseDialog'
import { Button } from '../ui/button'

export interface ConfirmDialogProps {
  open: boolean
  onClose: () => void
  onConfirm: () => void | Promise<void>
  title: string
  description?: string | React.ReactNode
  confirmLabel?: string
  cancelLabel?: string
  destructive?: boolean
  loading?: boolean
}

export function ConfirmDialog({
  open,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  destructive = false,
  loading = false,
}: ConfirmDialogProps) {
  const handleClose = () => {
    if (loading) return
    onClose()
  }

  return (
    <BaseDialog
      open={open}
      onOpenChange={(o) => {
        if (!o) handleClose()
      }}
      size="sm"
      loading={loading}
    >
      <BaseDialog.Header>
        <BaseDialog.Title>{title}</BaseDialog.Title>
      </BaseDialog.Header>
      {description && (
        <BaseDialog.Body>
          {typeof description === 'string' ? (
            <p className="text-sm text-gray-600">{description}</p>
          ) : (
            description
          )}
        </BaseDialog.Body>
      )}
      <BaseDialog.Footer>
        <Button variant="outline" onClick={handleClose} disabled={loading}>
          {cancelLabel}
        </Button>
        <Button
          variant={destructive ? 'destructive' : 'default'}
          onClick={onConfirm}
          disabled={loading}
        >
          {loading && <Loader2 className="w-4 h-4 animate-spin mr-2" />}
          {confirmLabel}
        </Button>
      </BaseDialog.Footer>
    </BaseDialog>
  )
}