import React from 'react';
import './Logo.css';

interface LogoProps {
  size?: 'sm' | 'md' | 'lg';
  showText?: boolean;
  className?: string;
  href?: string;
  onClick?: () => void;
}

const sizeMap = {
  sm: { width: 50, height: 50, fontSize: '18px' },
  md: { width: 56, height: 56, fontSize: '24px' },
  lg: { width: 80, height: 80, fontSize: '28px' }
};

export const Logo: React.FC<LogoProps> = ({ 
  size = 'md', 
  showText = true, 
  className = '',
  href = '/',
  onClick
}) => {
  const dimensions = sizeMap[size];

  const textStyle: React.CSSProperties = {
    fontSize: dimensions.fontSize,
    letterSpacing: '0.5px',
    transition: 'color 0.3s ease',
    WebkitFontSmoothing: 'antialiased',
    MozOsxFontSmoothing: 'grayscale'
  };

  const content = (
    <>
      <img 
        src="/assets/images/app/logo_avanzacast.svg" 
        alt="AvanzaCast" 
        style={{ 
          width: `${dimensions.width}px`, 
          height: `${dimensions.height}px`,
          transition: 'transform 0.3s ease'
        }}
        onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.1)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
      />
      {showText && (
        <span className="logo-text" style={textStyle}>
          Avanza<span className="logo-text-bold">Cast</span>
        </span>
      )}
    </>
  );

  const containerStyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    textDecoration: 'none',
    color: 'inherit'
  };

  // Si hay onClick, renderizar como div clickeable
  if (onClick) {
    return (
      <div 
        onClick={onClick}
        style={{ ...containerStyle, cursor: 'pointer' }}
        className={className}
      >
        {content}
      </div>
    );
  }

  // Si no, renderizar como link
  return (
    <a 
      href={href} 
      style={containerStyle}
      className={className}
    >
      {content}
    </a>
  );
};