import React from 'react';

type Color = 'green' | 'red' | 'amber' | 'blue' | 'zinc' | 'emerald';

const colorMap: Record<Color, string> = {
  green:   'bg-green-100 text-green-700 ring-1 ring-green-200',
  red:     'bg-red-100 text-red-700 ring-1 ring-red-200',
  amber:   'bg-amber-100 text-amber-700 ring-1 ring-amber-200',
  blue:    'bg-blue-100 text-blue-700 ring-1 ring-blue-200',
  zinc:    'bg-gray-100 text-gray-600 ring-1 ring-gray-200',
  emerald: 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200',
};

export default function Badge({ color = 'zinc', children }: { color?: Color; children: React.ReactNode }) {
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${colorMap[color]}`}>
      {children}
    </span>
  );
}