// Tiny pill that tags where a transaction came from. Uses color-mix() so
// the background adapts to whatever surface it's sitting on (works in both
// light and dark themes without per-theme variants).

const SOURCE_COLORS = {
  plaid:   '#2C5A87',  // bank navy
  manual:  '#7A7A7A',  // neutral
  cleaner: '#9A6E3F',  // warm tan
  lodgify: '#1B6CAE',  // booking cyan
  airbnb:  '#BD3539',  // brand coral
  direct:  '#3D6A5C',  // sage
  auto:    '#9A9A9A',  // legacy faded
};

const SOURCE_LABELS = {
  plaid: 'Plaid', manual: 'Manual', cleaner: 'Cleaner',
  lodgify: 'Lodgify', airbnb: 'Airbnb', direct: 'Direct', auto: 'Auto',
};

function SourceTag({ source, size = 'sm' }) {
  const color = SOURCE_COLORS[source] || SOURCE_COLORS.manual;
  const label = SOURCE_LABELS[source] || source || 'Manual';
  const small = size === 'sm';
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      padding: small ? '1px 6px' : '2px 8px',
      borderRadius: 4,
      fontSize: small ? 10.5 : 12,
      fontWeight: 600,
      letterSpacing: 0.4,
      textTransform: 'uppercase',
      background: `color-mix(in oklab, ${color} 14%, transparent)`,
      color,
      whiteSpace: 'nowrap',
    }}>
      {label}
    </span>
  );
}

const SOURCES_LIST = ['plaid', 'lodgify', 'airbnb', 'direct', 'cleaner', 'manual', 'auto'];

Object.assign(window, { SourceTag, SOURCE_LABELS, SOURCES_LIST });