GlassBadge.tsx

import React from 'react';
import clsx from 'clsx';
import { GlassContainer } from './GlassContainer';
import { GlassIntensity } from '../types/glass';

export interface GlassBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
  size?: 'xs' | 'sm' | 'md';
  intensity?: GlassIntensity;
  children: React.ReactNode;
}

export const GlassBadge = React.forwardRef<HTMLSpanElement, GlassBadgeProps>(
  ({
    variant = 'default',
    size = 'sm',
    intensity = 'light',
    children,
    className,
    ...props
  }, ref) => {
    const variantStyles = {
      default: {
        background: 'rgba(59, 130, 246, 0.1)',
        border: 'rgba(59, 130, 246, 0.2)',
        text: 'text-blue-600',
      },
      success: {
        background: 'rgba(34, 197, 94, 0.1)',
        border: 'rgba(34, 197, 94, 0.2)',
        text: 'text-green-600',
      },
      warning: {
        background: 'rgba(251, 191, 36, 0.1)',
        border: 'rgba(251, 191, 36, 0.2)',
        text: 'text-yellow-600',
      },
      error: {
        background: 'rgba(239, 68, 68, 0.1)',
        border: 'rgba(239, 68, 68, 0.2)',
        text: 'text-red-600',
      },
      info: {
        background: 'rgba(139, 92, 246, 0.1)',
        border: 'rgba(139, 92, 246, 0.2)',
        text: 'text-purple-600',
      },
    };

    const sizeClasses = {
      xs: 'px-2 py-0.5 text-xs',
      sm: 'px-2.5 py-1 text-sm',
      md: 'px-3 py-1.5 text-sm',
    };

    const currentVariant = variantStyles[variant];

    return (
      <span
        ref={ref}
        className={clsx(
          'glass-badge',
          'inline-flex',
          'items-center',
          'justify-center',
          'font-medium',
          'rounded-md',
          currentVariant.text,
          sizeClasses[size],
          className
        )}
        {...props}
      >
        <GlassContainer
          intensity={intensity}
          blur={8}
          saturation={120}
          luminosity={100}
          cornerRadius={6}
          borderWidth={0.5}
          borderOpacity={0.3}
          shadowIntensity={0.05}
          style={{
            background: currentVariant.background,
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: '100%',
          }}
        >
          {children}
        </GlassContainer>
      </span>
    );
  }
);

GlassBadge.displayName = 'GlassBadge';