import { PropsWithChildren } from 'react';

import { clsx } from 'clsx';

type BadgeTone =
  | 'green'
  | 'blue'
  | 'purple'
  | 'slate'
  | 'red';

type BadgeProps = PropsWithChildren<{
  tone?: BadgeTone;
}>;

export function Badge({
  children,
  tone = 'green',
}: BadgeProps) {
  const tones: Record<BadgeTone, string> = {
    green:
      'bg-green-500/15 text-green-300',
    blue:
      'bg-blue-500/15 text-blue-300',
    purple:
      'bg-purple-500/15 text-purple-300',
    slate:
      'bg-slate-500/15 text-slate-300',
    red:
      'bg-red-500/15 text-red-300',
  };

  return (
    <span
      className={clsx(
        'rounded-lg px-2.5 py-1 text-xs font-semibold',
        tones[tone],
      )}
    >
      {children}
    </span>
  );
}