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

type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning';

interface ModalFooterProps {
  onCancel?: () => void;
  onSubmit?: () => void;
  onBack?: () => void;
  submitText?: string;
  cancelText?: string;
  backText?: string;
  isLoading?: boolean;
  isDisabled?: boolean;
  showBackButton?: boolean;
  submitVariant?: ButtonVariant;
  /** Custom content to render instead of default buttons */
  children?: React.ReactNode;
  /** Additional class names */
  className?: string;
}

const variantClasses: Record<ButtonVariant, string> = {
  primary: 'bg-blue-600 hover:bg-blue-700 text-white',
  secondary: 'bg-gray-600 hover:bg-gray-700 text-white',
  danger: 'bg-red-600 hover:bg-red-700 text-white',
  success: 'bg-green-600 hover:bg-green-700 text-white',
  warning: 'bg-amber-600 hover:bg-amber-700 text-white',
};

export const ModalFooter: React.FC<ModalFooterProps> = ({
  onCancel,
  onSubmit,
  onBack,
  submitText = 'Save',
  cancelText = 'Cancel',
  backText = 'Back',
  isLoading = false,
  isDisabled = false,
  showBackButton = false,
  submitVariant = 'primary',
  children,
  className = '',
}) => {
  if (children) {
    return <div className={`flex items-center gap-3 ${className}`}>{children}</div>;
  }

  return (
    <div className={`flex items-center gap-3 ${className}`}>
      {showBackButton && onBack && (
        <button
          onClick={onBack}
          disabled={isLoading}
          className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
        >
          {backText}
        </button>
      )}

      <div className="flex-1" />

      {onCancel && (
        <button
          onClick={onCancel}
          disabled={isLoading}
          className="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
        >
          {cancelText}
        </button>
      )}

      {onSubmit && (
        <button
          onClick={onSubmit}
          disabled={isLoading || isDisabled}
          className={`px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 ${variantClasses[submitVariant]}`}
        >
          {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
          {submitText}
        </button>
      )}
    </div>
  );
};

export default ModalFooter;
