/**
 * Badge 컴포넌트
 * 
 * 상태, 카테고리 등을 표시하는 배지 컴포넌트입니다.
 */
import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/cn';

export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'premium' | 'neon';
export type BadgeSize = 'sm' | 'md' | 'lg';

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
  size?: BadgeSize;
}

const variantStyles: Record<BadgeVariant, string> = {
  default: 'bg-slate-100 text-slate-700 border border-slate-200',
  success: 'bg-emerald-50 text-emerald-700 border border-emerald-200',
  warning: 'bg-amber-50 text-amber-700 border border-amber-200',
  error: 'bg-rose-50 text-rose-700 border border-rose-200',
  info: 'bg-sky-50 text-sky-700 border border-sky-200',
  premium: 'bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 text-white shadow-[0_2px_10px_rgba(168,85,247,0.4)] border border-white/20 font-bold tracking-wide relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-t before:from-black/10 before:to-transparent',
  neon: 'bg-transparent text-cyan-600 border border-cyan-400/60 shadow-[0_0_10px_rgba(6,182,212,0.15),inset_0_0_8px_rgba(6,182,212,0.08)] font-bold tracking-wide',
};

const sizeStyles: Record<BadgeSize, string> = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-2.5 py-1 text-sm',
  lg: 'px-3 py-1.5 text-base',
};

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant = 'default', size = 'md', children, ...props }, ref) => {
    return (
      <span
        ref={ref}
        className={cn(
          'inline-flex items-center rounded-full font-medium',
          variantStyles[variant],
          sizeStyles[size],
          className
        )}
        {...props}
      >
        {children}
      </span>
    );
  }
);

Badge.displayName = 'Badge';