---
import { tackleVisualKind, tackleVisualTone, type TackleVisualKind } from "../lib/tackle-visuals";
const { name, size = 28, kind: kindOverride } = Astro.props as { name?: string | null; size?: number; kind?: TackleVisualKind };
const kind = kindOverride ?? tackleVisualKind(name);
const tone = tackleVisualTone(name);
---
<svg class="tackle-glyph" data-kind={kind} data-tone={tone} width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
  {kind === "spinner" && <><path d="M17 4v7"/><path class="tackle-glyph__fill" d="M17 10c7 1 8 7 2 11-5 3-9-2-7-6 1-3 3-4 5-5Z"/><path d="M18 21v4c0 4-5 4-5 0"/></>}
  {kind === "wobbler" && <><path class="tackle-glyph__fill" d="M5 15c5-6 14-7 21-2-4 8-13 9-21 2Z"/><circle cx="22" cy="13" r="1"/><path d="m8 18-2 5m11-3-1 5m-1 0c0 3-4 3-4 0m10-2c0 3-4 3-4 0"/></>}
  {kind === "soft" && <><path class="tackle-glyph__fill" d="M4 17c6-7 14-7 20-2l5-5-1 10-5-3c-7 5-14 5-19 0Z"/><circle cx="8" cy="15" r="1"/></>}
  {kind === "boilie" && <><circle class="tackle-glyph__fill" cx="11" cy="16" r="6"/><circle class="tackle-glyph__fill" cx="22" cy="16" r="6"/><path d="M5 8c8 3 14 3 22 0"/></>}
  {kind === "worm" && <><path class="tackle-glyph__stroke" d="M5 22c0-11 8-14 12-7s10 3 10-5"/><path d="m23 7 4 3-4 2"/></>}
  {kind === "rig" && <><path d="M16 3v17c0 7-10 8-11 1-1-4 3-6 6-4"/><path d="m8 17 3 0-1 3"/><circle class="tackle-glyph__fill" cx="16" cy="7" r="3"/></>}
  {kind === "unknown" && <><path class="tackle-glyph__fill" d="M16 4c5 5 8 10 7 16-1 5-5 8-9 6-5-2-6-7-3-11 2-3 4-6 5-11Z"/><path d="M15 8c4 4 5 8 3 12"/></>}
</svg>