Stirling-PDF/frontend/src/core/components/shared/Badge.tsx

import React from 'react';
import { Box } from '@mantine/core';

interface BadgeProps {
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'default' | 'colored';
  color?: string;
  textColor?: string;
  backgroundColor?: string;
  className?: string;
  style?: React.CSSProperties;
}

const Badge: React.FC<BadgeProps> = ({ 
  children, 
  size = 'sm', 
  variant = 'default',
  color,
  textColor,
  backgroundColor,
  className,
  style 
}) => {
  const getSizeStyles = () => {
    switch (size) {
      case 'sm':
        return {
          padding: '0.125rem 0.5rem',
          fontSize: '0.75rem',
          fontWeight: 700,
          borderRadius: '0.5rem',
        };
      case 'md':
        return {
          padding: '0.25rem 0.75rem',
          fontSize: '0.875rem',
          fontWeight: 700,
          borderRadius: '0.625rem',
        };
      case 'lg':
        return {
          padding: '0.375rem 1rem',
          fontSize: '1rem',
          fontWeight: 700,
          borderRadius: '0.75rem',
        };
      default:
        return {};
    }
  };

  const getVariantStyles = () => {
    // If explicit colors are provided, use them
    if (textColor && backgroundColor) {
      return {
        backgroundColor,
        color: textColor,
      };
    }
    
    // If a single color is provided, use it for text and 20% opacity for background
    if (color) {
      return {
        backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
        color: color,
      };
    }
    
    // If variant is colored but no color provided, use default colored styling
    if (variant === 'colored') {
      return {
        backgroundColor: `color-mix(in srgb, var(--category-color-default) 15%, transparent)`,
        color: 'var(--category-color-default)',
        borderColor: `color-mix(in srgb, var(--category-color-default) 30%, transparent)`,
        border: '1px solid',
      };
    }
    
    // Default styling
    return {
      background: 'var(--tool-header-badge-bg)',
      color: 'var(--tool-header-badge-text)',
    };
  };

  return (
    <Box
      className={className}
      style={{
        ...getSizeStyles(),
        ...getVariantStyles(),
        ...style,
      }}
    >
      {children}
    </Box>
  );
};

export default Badge;