import React from 'react';

type Variant = 'popular' | 'new' | 'beta';
type Size = 'sm' | 'md' | 'lg';

interface BadgeProps {
  variant?: Variant;
  size?: Size;
  label?: string;
  className?: string;
}

const variantStyles: Record<Variant, { bg: string; text: string; defaultLabel: string }> = {
  popular: { bg: 'bg-accent', text: 'text-white', defaultLabel: '인기' },
  new: { bg: 'bg-emerald-500', text: 'text-white', defaultLabel: 'NEW' },
  beta: { bg: 'bg-slate-700', text: 'text-white', defaultLabel: 'BETA' },
};

const sizeStyles: Record<Size, string> = {
  sm: 'text-[10px] px-2 py-0.5',
  md: 'text-xs px-3 py-1',
  lg: 'text-sm px-4 py-1.5',
};

const Badge: React.FC<BadgeProps> = ({
  variant = 'popular',
  size = 'md',
  label,
  className = '',
}) => {
  const v = variantStyles[variant];
  return (
    <span
      className={`inline-flex items-center font-semibold tracking-wide rounded-full shadow-sm ${v.bg} ${v.text} ${sizeStyles[size]} ${className}`}
    >
      {label ?? v.defaultLabel}
    </span>
  );
};

export default Badge;
