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

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

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

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      aria-label={ariaLabel || text}
      className={`standard-cta-button ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '8px',
        padding: '16px 28px',
        borderRadius: '12px',
        border: 'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        fontSize: 'var(--font-body)',
        fontWeight: 'var(--font-weight-h3)',
        fontFamily: 'var(--font-family-base)',
        backgroundColor: disabled ? '#9CA3AF' : 'var(--color-primary)',
        color: '#FFFFFF',
        boxShadow: disabled 
          ? 'none' 
          : '0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
        transition: 'all 200ms ease-in-out',
        position: 'relative',
        overflow: 'hidden',
        opacity: disabled ? 0.6 : 1,
        transform: isHovered && !disabled ? 'translateY(-1px)' : 'translateY(0)',
        ...(isHovered && !disabled && {
          backgroundColor: '#030359', // Darker shade of primary brand color
          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)'
        })
      }}
    >
      {/* Text with underline animation */}
      <span
        style={{
          position: 'relative',
          display: 'inline-block',
          transition: 'all 200ms ease-in-out'
        }}
      >
        {text}
        {/* Animated underline */}
        <span
          style={{
            position: 'absolute',
            bottom: '-2px',
            left: '0',
            height: '1px',
            backgroundColor: '#FFFFFF',
            transition: 'width 200ms ease-in-out',
            width: isHovered && !disabled ? '100%' : '0%'
          }}
        />
      </span>
      
      {/* Arrow icon with slide-in animation */}
      <span
        style={{
          display: 'flex',
          alignItems: 'center',
          transition: 'transform 200ms ease-in-out',
          transform: isHovered && !disabled ? 'translateX(0)' : 'translateX(4px)',
          opacity: isHovered && !disabled ? 1 : 0.8
        }}
      >
        <ArrowRight 
          size={16} 
          style={{ 
            color: '#FFFFFF',
            transition: 'all 200ms ease-in-out'
          }} 
        />
      </span>
    </button>
  );
}