import React from 'react'
import { Loader2 } from 'lucide-react'

interface DialogContentProps {
  title: string
  children: React.ReactNode

  footer?: React.ReactNode
  onConfirm?: () => void
  onCancel?: () => void
  confirmText?: string
  cancelText?: string

  isConfirmDisabled?: boolean
  isConfirmLoading?: boolean

  confirmButtonVariant?: 'primary' | 'danger'
  confirmButtonType?: 'button' | 'submit'
}

export const DialogContent = ({
  title,
  children,
  footer,
  onConfirm,
  onCancel,
  confirmText = '确认',
  cancelText = '取消',
  isConfirmDisabled = false,
  isConfirmLoading = false,
  confirmButtonVariant = 'primary',
  confirmButtonType = 'button'
}: DialogContentProps) => {
  const confirmButtonClass = confirmButtonVariant === 'danger'
    ? "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
    : "px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"

  const showConfirmButton = onConfirm || confirmButtonType === 'submit'

  return (
    <div className="p-6">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
        {title}
      </h3>

      <div className="mb-6">
        {children}
      </div>

      {footer ? (
        footer
      ) : (
        <div className="flex justify-end gap-3">
          {onCancel && (
            <button
              type="button"
              onClick={onCancel}
              className="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
            >
              {cancelText}
            </button>
          )}
          {showConfirmButton && (
            <button
              type={confirmButtonType}
              onClick={onConfirm}
              disabled={isConfirmDisabled || isConfirmLoading}
              className={confirmButtonClass}
            >
              {isConfirmLoading && <Loader2 className="animate-spin" size={16} />}
              {confirmText}
            </button>
          )}
        </div>
      )}
    </div>
  )
}