export const Typography = ({
  variant = 'body-lg',
  component,
  children,
  className = '',
  weight,
  color,
  ...props
}) => {
  // Mapeo de pesos a clases CSS genéricas
  const weightClasses = {
    light: 'font-light',
    regular: 'font-regular',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold',
  };

  // Mapeo de colores a clases CSS genéricas
  const colorClasses = {
    black: 'color-black',
    white: 'color-white',
    'gray-900': 'color-gray-900',
    'gray-700': 'color-gray-700',
    'gray-600': 'color-gray-600',
    'gray-500': 'color-gray-500',
    'gray-400': 'color-gray-400',
    'red-600': 'color-red-600',
    'red-500': 'color-red-500',
    'blue-600': 'color-blue-600',
    'green-600': 'color-green-600',
    'green-100': 'color-green-100',
    brand: 'color-brand', // Color brand principal del sistema (#56B676)
    main: 'color-main', // Main color (verde-azulado oscuro #38656D)
    teal: 'color-teal', // Teal color (usado en botones #2D5C63)
  };

  // Clases genéricas basadas en Figma - Usando las clases predefinidas del CSS
  const variantClasses = {
    h1: 'text-h1',
    h2: 'text-h2',
    h3: 'text-h3',
    h4: 'text-h4',
    h5: 'text-h5',
    h6: 'text-h6',
    'body-lg': 'text-body-lg',
    'body-md': 'text-body-md',
    'body-sm': 'text-body-sm',
    body1: 'text-body-lg', // Alias de body-lg
    body2: 'text-body-md', // Alias de body-md
    caption: 'text-body-sm color-gray-600', // Body small con color gris por defecto
    overline: 'text-body-sm uppercase tracking-wide',
    'mono-lg': 'text-mono-lg',
    'mono-md': 'text-mono-md',
    'mono-sm': 'text-mono-sm',
    mono: 'text-mono-md', // Alias por defecto de mono-md
  };

  const Component = component || (variant.startsWith('h') ? variant : 'p');
  
  // Construir clases base usando las clases genéricas CSS
  let baseClasses = variantClasses[variant] || variantClasses['body-lg'];
  
  // Si se especifica un peso, agregarlo (remover peso por defecto si existe)
  if (weight && weightClasses[weight]) {
    // Remover cualquier peso previo de las clases base (font-light, font-regular, etc.)
    baseClasses = baseClasses.replace(/font-(light|regular|medium|semibold|bold)/g, '');
    baseClasses = `${baseClasses} ${weightClasses[weight]}`.trim();
  }

  // Si se especifica un color, agregarlo (remover color por defecto si existe, como en caption)
  if (color && colorClasses[color]) {
    // Remover cualquier color previo de las clases base
    baseClasses = baseClasses.replace(/color-\w+(-\w+)?/g, '');
    baseClasses = `${baseClasses} ${colorClasses[color]}`.trim();
  }

  const classes = `${baseClasses} ${className}`.trim();

  return (
    <Component className={classes} {...props}>
      {children}
    </Component>
  );
};

export default Typography;
