import { html, type TemplateResult } from 'lit'

/**
 * A monochrome icon that takes its colour from `currentColor`.
 *
 * An SVG loaded through `<img>` is a separate document: the `stroke=
 * "currentColor"` in our icon files resolves against the SVG's *own* root,
 * where `color` defaults to black, and no CSS from this page can reach in.
 * That's why `<img>`-based icons stay black when the system theme flips the
 * page to dark.
 *
 * Painting the file as a CSS mask over a `currentColor` background sidesteps
 * it — the glyph is the mask, the colour is ours — so icons follow the theme
 * *and* whatever they happen to sit on (a white pill, a coloured button).
 *
 * Icons are decorative here: every call site labels the control that contains
 * them, so these are hidden from assistive tech.
 */
export function icon(name: string, size = '1em'): TemplateResult {
  return html`
    <i
      class="icon"
      style="--icon:url(/static/icons/${name}.svg);width:${size};height:${size}"
      aria-hidden="true"
    ></i>
  `
}
