// Leonard's Farm: Badge component

const tones = {
  green:  { background: 'var(--green-100)',  color: 'var(--green-700)' },
  lime:   { background: 'var(--lime-100)',   color: 'var(--lime-600)' },
  water:  { background: 'var(--water-100)',  color: 'var(--water-700)' },
  sand:   { background: 'var(--sand-100)',   color: 'var(--ink-700)' },
  solid:  { background: 'var(--brand-primary)', color: 'var(--text-inverse)' },
};

// Small rounded label / tag. Use for crop seasons, article topics, status.
function Badge({ children, tone = 'green', dot = false, ...rest }) {
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: '0.45em',
        padding: '5px 12px',
        borderRadius: 'var(--radius-pill)',
        fontFamily: 'var(--font-body)',
        fontSize: 'var(--fs-xs)',
        fontWeight: 'var(--fw-semibold)',
        letterSpacing: '0.01em',
        lineHeight: 1,
        ...tones[tone],
      }}
      {...rest}
    >
      {dot && (
        <span aria-hidden="true" style={{
          width: 6, height: 6, borderRadius: '50%',
          background: 'currentColor', opacity: 0.85,
        }} />
      )}
      {children}
    </span>
  );
}

window.Badge = Badge;