/**
 * Plain-HTML chart legend — replaces every chart's hand-rolled SVG legend.
 * Both of the app's stray-`}` CSS bugs lived inside hand-written SVG legend
 * `fill="..."` strings; keeping legends out of SVG removes that bug class.
 *
 * items: [{ color, label, shape: 'swatch' | 'diamond' | 'line' | 'dot' }]
 */
export default function ChartLegend({ items }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.25rem', marginTop: 'var(--space-2)' }}>
      {items.map((item) => (
        <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
          <LegendMark shape={item.shape} color={item.color} />
          <span style={{ fontSize: '0.8rem', color: 'var(--cv-ink-2)' }}>{item.label}</span>
        </div>
      ))}
    </div>
  )
}

function LegendMark({ shape, color }) {
  if (shape === 'diamond') {
    return (
      <span
        style={{
          display: 'inline-block',
          width: '9px',
          height: '9px',
          background: color,
          transform: 'rotate(45deg)',
          flexShrink: 0,
        }}
      />
    )
  }
  if (shape === 'line') {
    return <span style={{ display: 'inline-block', width: '16px', height: '3px', background: color, borderRadius: '2px', flexShrink: 0 }} />
  }
  if (shape === 'dot') {
    return <span style={{ display: 'inline-block', width: '10px', height: '10px', background: color, borderRadius: '50%', flexShrink: 0 }} />
  }
  return <span style={{ display: 'inline-block', width: '11px', height: '11px', background: color, borderRadius: '3px', flexShrink: 0 }} />
}