frontend/src/components/common/Badge.tsx

import React from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { cn } from '@/utils/helpers';

interface BadgeProps extends Omit<HTMLMotionProps<'div'>, 'ref'> {
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
  size?: 'sm' | 'md';
  icon?: React.ReactNode;
  children?: React.ReactNode;
}

const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
  (
    {
      variant = 'primary',
      size = 'md',
      icon,
      children,
      className,
      ...props
    },
    ref
  ) => {
    const variants = {
      primary: 'bg-emerald-500/20 text-emerald-200 border border-emerald-500/30',
      secondary: 'bg-slate-700/50 text-slate-200 border border-slate-600/50',
      success: 'bg-green-500/20 text-green-200 border border-green-500/30',
      warning: 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30',
      error: 'bg-red-500/20 text-red-200 border border-red-500/30',
    };

    const sizes = {
      sm: 'px-2 py-1 text-xs gap-1',
      md: 'px-3 py-1.5 text-sm gap-1.5',
    };

    return (
      <motion.div
        ref={ref}
        whileHover={{ scale: 1.05 }}
        className={cn(
          'inline-flex items-center rounded-full font-medium transition-all duration-200',
          variants[variant],
          sizes[size],
          className
        )}
        {...props}
      >
        {icon && <span className="flex">{icon}</span>}
        {children}
      </motion.div>
    );
  }
);

Badge.displayName = 'Badge';

export default Badge;