import { html, TemplateResult } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';

/**
 * Renders a design-system icon through nile-glyph. ng-prefixed names are
 * stroke-drawn in @aquera/nile-glyph's set; the rest are fill-drawn.
 *
 * Pass `color` to override nile-glyph's built-in default ink. Without it the
 * element writes its own grey onto its inline style, which no parent rule can
 * outrank — so `currentColor` is how an icon tracks the colour of the control
 * it sits in.
 */
export function renderGlyph(
  name: string,
  size: number,
  color?: string
): TemplateResult {
  return html`<nile-glyph
    name=${name}
    size=${size}
    method=${name.startsWith('ng-') ? 'stroke' : 'fill'}
    color=${ifDefined(color)}
  ></nile-glyph>`;
}