/**
 * React renderers of the Company Atlas mark. Geometry lives in `geometry.ts` (shared with the icon build script);
 * this file only turns the shape list into SVG elements (`MarkArt`) or into a data-URI `<img>` for Satori (`MarkImg`).
 */
import { type MarkColors, type MarkOptions, MARK_DARK, MARK_VIEWBOX, markDataUri, markShapes } from './geometry';

export { MARK_DARK, MARK_LIGHT, MARK_PLATE_RADIUS, MARK_TOKENS, MARK_VIEWBOX, markDataUri, markLevel, markSvgString } from './geometry';
export type { MarkColors, MarkLevel, MarkOptions } from './geometry';

/** Shapes only — wrap in your own <svg viewBox="0 0 64 64">. */
export function MarkArt({ colors, ...opts }: { colors: MarkColors } & MarkOptions) {
  return (
    <>
      {markShapes(colors, opts).map((s, i) => {
        const { 'stroke-width': sw, 'stroke-linecap': cap, ...rest } = s.attrs as Record<string, string | number | undefined>;
        const props = { ...rest, strokeWidth: sw, strokeLinecap: cap as 'round' | undefined };
        return s.tag === 'rect' ? <rect key={i} {...props} /> : <path key={i} {...props} />;
      })}
    </>
  );
}

/** For ImageResponse routes (Satori rasterises `<img>` data URIs reliably). Fixed colours only — no CSS variables. */
export function MarkImg({ px, colors = MARK_DARK, ...opts }: { px: number; colors?: MarkColors } & MarkOptions) {
  // eslint-disable-next-line @next/next/no-img-element
  return <img width={px} height={px} src={markDataUri(colors, { ...opts, size: MARK_VIEWBOX })} alt="" style={{ width: px, height: px }} />;
}