import React from 'react';
import clsx from 'clsx';

const badgeVariants = {
  indigo: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20',
  emerald: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
  amber: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
  rose: 'bg-rose-500/10 text-rose-400 border-rose-500/20',
  slate: 'bg-slate-800 text-slate-300 border-slate-700',
};

export default function Badge({ children, variant = 'indigo', className = '' }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium tracking-wide select-none',
        badgeVariants[variant] || badgeVariants.slate,
        className
      )}
    >
      {children}
    </span>
  );
}