// Badge Component
import { ReactNode } from 'react';
import { clsx } from 'clsx';
import './Badge.css';

interface BadgeProps {
  children: ReactNode;
  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  className?: string;
}

export default function Badge({
  children,
  variant = 'secondary',
  size = 'medium',
  className,
}: BadgeProps) {
  return (
    <span className={clsx('badge', `badge--${variant}`, `badge--${size}`, className)}>
      {children}
    </span>
  );
}