AvanzaCast/shared/components/Logo.tsx

import React from 'react';

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 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 
          style={{ 
            fontSize: dimensions.fontSize,
            fontFamily: 'Requiner, sans-serif',
            transition: 'color 0.3s ease'
          }}
        >
          Avanza<span style={{ fontWeight: 700 }}>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>
  );
};