---
/**
 * Icon — renders an SVG from /public.
 *
 * mode="mask" (default): paints the SVG silhouette with `currentColor` via a CSS
 *   mask, so monochrome glyphs (github, arrows, play, mail…) tint to the brand
 *   regardless of the file's own hardcoded fills.
 * mode="img": a plain <img>, preserving the file's original colors — use for
 *   multicolor illustrations, brand wordmarks, and client/partner logos.
 *
 * `name` is a path under /public, e.g. "icons/github.svg" or "clients/skiff.svg".
 */
interface Props {
  name: string;
  alt?: string;
  size?: string; // any CSS length; defaults to 1.25rem
  mode?: 'mask' | 'img';
  class?: string;
}

const { name, alt = '', size = '1.25rem', mode = 'mask', class: cls = '' } = Astro.props;
const src = `/${name.replace(/^\/+/, '')}`;
const decorative = alt === '';
---

{
  mode === 'mask' ? (
    <span
      class={`icon-mask ${cls}`}
      role={decorative ? undefined : 'img'}
      aria-label={decorative ? undefined : alt}
      aria-hidden={decorative ? 'true' : undefined}
      style={`--icon-url:url('${src}');--icon-size:${size};`}
    />
  ) : (
    <img
      src={src}
      alt={alt}
      loading="lazy"
      decoding="async"
      class={cls}
      style={`height:${size};width:auto;`}
    />
  )
}

<style>
  .icon-mask {
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) no-repeat center / contain;
    mask: var(--icon-url) no-repeat center / contain;
  }
</style>
