---
import Icon from './Icon.astro';

interface Props {
  icon: string;
  label: string;
  tone?: 'green' | 'navy' | 'gold' | 'light';
}
const { icon, label, tone = 'green' } = Astro.props;

const tones: Record<string, string> = {
  green: 'bg-green-50 text-green ring-green/20',
  navy: 'bg-navy-50 text-navy ring-navy/20',
  gold: 'bg-amber-50 text-amber-700 ring-amber-300/50',
  light: 'bg-white/10 text-white ring-white/20',
};
---
<span class:list={['inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ring-1', tones[tone]]}>
  <Icon name={icon} class="h-4 w-4" />{label}
</span>