import React, { useState } from 'react';
import { ArrowRight } from 'lucide-react';

interface PrimaryCTAButtonProps {
  text: string;
  onClick: () => void;
  ariaLabel?: string;
  className?: string;
  disabled?: boolean;
}

export function PrimaryCTAButton({ 
  text, 
  onClick, 
  ariaLabel, 
  className = '',
  disabled = false 
}: PrimaryCTAButtonProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      aria-label={ariaLabel || text}
      className={`primary-cta-button ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '12px',
        padding: '8px 20px',
        borderRadius: '10px',
        border: 'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        fontSize: 'var(--font-body-lg)',
        fontWeight: 'var(--font-weight-h3)',
        fontFamily: 'var(--font-family-base)',
        backgroundColor: disabled ? '#9CA3AF' : 'var(--color-primary)',
        color: '#FFFFFF',
        boxShadow: disabled 
          ? 'none' 
          : '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
        transition: 'all 300ms ease-in-out',
        position: 'relative',
        overflow: 'hidden',
        opacity: disabled ? 0.6 : 1,
        transform: isHovered && !disabled ? 'translateY(-2px)' : 'translateY(0)',
        ...(isHovered && !disabled && {
          backgroundColor: '#030359', // Darker shade of primary brand color
          boxShadow: '0 8px 25px rgba(4, 4, 91, 0.3), 0 4px 6px rgba(4, 4, 91, 0.1)'
        })
      }}
    >
      {/* Text */}
      <span
        style={{
          fontSize: 'var(--font-body-lg)',
          fontWeight: 'var(--font-weight-h3)',
          fontFamily: 'var(--font-family-base)',
          color: '#FFFFFF',
          whiteSpace: 'nowrap'
        }}
      >
        {text}
      </span>
      
      {/* Arrow icon with enhanced animation */}
      <span
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '20px',
          height: '20px',
          borderRadius: '50%',
          backgroundColor: 'rgba(255, 255, 255, 0.2)',
          transition: 'all 300ms ease-in-out',
          transform: isHovered && !disabled ? 'translateX(4px) scale(1.1)' : 'translateX(0) scale(1)',
          ...(isHovered && !disabled && {
            backgroundColor: 'rgba(255, 255, 255, 0.3)'
          })
        }}
      >
        <ArrowRight 
          size={14} 
          style={{ 
            color: '#FFFFFF',
            transition: 'all 300ms ease-in-out'
          }} 
        />
      </span>
    </button>
  );
}

// Named exports for backward compatibility
export const PrimaryCTAButtonProps = PrimaryCTAButton;
export default PrimaryCTAButton;