import { FONT_FAMILY_MONO } from '../../../designTokens';

export const Badge = ({
  children,
  variant = 'default',
  size = 'medium',
  endIcon,
  className = '',
  style = {},
  ...props
}) => {
  const baseClasses = 'inline-flex items-center font-medium';

  // Primary/success/successOutline usan los mismos tamaños base que TenantActive (config tenant)
  const variantStyles = {
    primary: {
      border: '1px solid #334681',
      backgroundColor: '#F0F3FC',
      color: '#334681',
      borderRadius: '16px',
    },
    success: {
      border: '1px solid #0A742C',
      backgroundColor: 'var(--misc-exito-fondo, #D3FFDF)',
      color: '#0A742C',
      borderRadius: '16px',
    },
    successOutline: {
      border: '1px solid #0A742C',
      backgroundColor: 'transparent',
      color: '#0A742C',
      borderRadius: '16px',
    },
    error: {
      border: '1px solid #B30808',
      backgroundColor: '#F8DBDB',
      color: '#B30808',
      borderRadius: '16px',
    },
    inactive: {
      border: '1px solid #5F5F5F',
      backgroundColor: '#DDDDDD',
      color: '#5F5F5F',
      borderRadius: '16px',
    },
    pendiente: {
      border: '1px solid #CC4908',
      backgroundColor: 'var(--basics-white, #FFFFFF)',
      color: '#CC4908',
      borderRadius: '16px',
    },
  };

  const variantClasses = {
    default: 'bg-gray-100 text-gray-800 rounded-full',
    primary: '',
    success: '',
    successOutline: '',
    error: '',
    inactive: '',
    pendiente: '',
    warning: 'bg-yellow-100 text-yellow-800 rounded-full',
    danger: 'bg-red-100 text-red-800 rounded-full',
  };

  const sizeClasses = {
    small: 'px-2 py-0.5 text-xs',
    medium: 'px-3 py-0.5 text-xs',
    large: 'px-3 py-1.5 text-base',
  };

  // Para primary/success/successOutline/error/inactive/pendiente usar estilo inline (como TenantActive)
  const isTenantStyle =
    variant === 'primary' ||
    variant === 'success' ||
    variant === 'successOutline' ||
    variant === 'error' ||
    variant === 'inactive' ||
    variant === 'pendiente';
  const sizeStyles = isTenantStyle
    ? {
        small: { padding: '2px 12px 4px 12px', minHeight: '20px', fontSize: '12px', lineHeight: '18px', fontFamily: FONT_FAMILY_MONO },
        medium: { padding: '2px 12px 4px 12px', minHeight: '24px', fontSize: '12px', lineHeight: '18px', fontFamily: FONT_FAMILY_MONO },
        large: { padding: '4px 12px 6px 12px', minHeight: '28px', fontSize: '14px', lineHeight: '20px', fontFamily: FONT_FAMILY_MONO },
      }
    : null;

  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim();
  const combinedStyle = {
    ...(variantStyles[variant] || {}),
    ...(sizeStyles && sizeStyles[size] ? sizeStyles[size] : {}),
    ...style,
  };

  return (
    <span className={classes} style={Object.keys(combinedStyle).length ? combinedStyle : undefined} {...props}>
      {children}
      {endIcon && <span style={{ marginLeft: '4px', display: 'inline-flex', alignItems: 'center' }}>{endIcon}</span>}
    </span>
  );
};

export default Badge;
