import React from 'react';
import { PrimaryCTAButton, PrimaryCTAButtonProps } from './PrimaryCTAButton';

export type CTAButtonVariant = 'yellow' | 'blue' | 'custom';

export interface PrimaryCTAButtonVariantProps extends PrimaryCTAButtonProps {
  variant?: CTAButtonVariant;
  customBackgroundColor?: string;
  customTextColor?: string;
  customHoverBackgroundColor?: string;
}

/**
 * Primary CTA Button Variant Component
 * 
 * A flexible variant of the Primary CTA Button that supports multiple color schemes
 * while preserving all sophisticated animations and functionality.
 * 
 * Variants:
 * - 'yellow': Original yellow background (#F8C301) with white text (default)
 * - 'blue': Blue background (#04045B) with black text (#26231A)
 * - 'custom': Custom colors using customBackgroundColor and customTextColor props
 * 
 * Features:
 * - Multiple pre-defined color variants
 * - Custom color support
 * - All sophisticated slide animations preserved
 * - Consistent with brand guidelines
 * 
 * Usage:
 * ```tsx
 * // Yellow variant (default)
 * <PrimaryCTAButtonVariant text="Learn More" onClick={handleClick} />
 * 
 * // Blue variant
 * <PrimaryCTAButtonVariant variant="blue" text="Get Started" onClick={handleClick} />
 * 
 * // Custom colors
 * <PrimaryCTAButtonVariant 
 *   variant="custom"
 *   customBackgroundColor="#FF6B6B"
 *   customTextColor="#FFFFFF"
 *   customHoverBackgroundColor="#FF5252"
 *   text="Custom Button"
 *   onClick={handleClick}
 * />
 * ```
 */
export const PrimaryCTAButtonVariant: React.FC<PrimaryCTAButtonVariantProps> = ({
  variant = 'yellow',
  customBackgroundColor,
  customTextColor,
  customHoverBackgroundColor,
  className,
  ...props
}) => {
  // Generate variant-specific className
  const getVariantClassName = () => {
    switch (variant) {
      case 'blue':
        return 'primary-cta-button-blue';
      case 'yellow':
        return 'primary-cta-button-yellow';
      case 'custom':
        return 'primary-cta-button-custom';
      default:
        return 'primary-cta-button-yellow';
    }
  };

  // Custom CSS variables for custom variant
  const customStyles = variant === 'custom' ? {
    '--custom-bg-color': customBackgroundColor || '#F8C301',
    '--custom-text-color': customTextColor || '#FFFFFF',
    '--custom-hover-bg-color': customHoverBackgroundColor || customBackgroundColor || '#F8C301',
  } as React.CSSProperties : {};

  const combinedClassName = `${getVariantClassName()} ${className || ''}`;

  return (
    <div style={customStyles}>
      <PrimaryCTAButton 
        {...props}
        className={combinedClassName}
      />
    </div>
  );
};

export default PrimaryCTAButtonVariant;