---
import { fishVisualFamily, type FishVisualFamily } from "../lib/fish-visuals";
const { name, size = 92, family: familyOverride } = Astro.props as { name: string; size?: number; family?: FishVisualFamily };
const family = familyOverride ?? fishVisualFamily(name);
---
<svg class="fish-silhouette" data-family={family} width={size} height={Math.round(size * .48)} viewBox="0 0 120 58" aria-hidden="true">
  {family === "pike" && <><path d="M19 30C35 16 70 15 94 24l22 1-7 9-15 1C70 45 35 44 19 30Z"/><path d="M22 30 2 15v30Z"/><path d="m49 18 12-14 15 12M49 42l13 12 15-13"/><circle cx="105" cy="28" r="2.2" class="fish-eye"/></>}
  {family === "salmonid" && <><path d="M20 30C39 12 79 12 103 28 81 46 40 47 20 30Z"/><path d="M23 30 3 13v34Z"/><path d="m50 16 11-13 15 12M51 43l11 12 14-12"/><path d="m80 17 7-7 5 9"/><circle cx="94" cy="25" r="2.2" class="fish-eye"/></>}
  {family === "cyprinid" && <><path d="M22 29C38 5 77 5 101 29 77 53 38 53 22 29Z"/><path d="M25 29 3 9v40Z"/><path d="M52 10 68 1l12 13M53 48l16 9 12-14"/><circle cx="91" cy="24" r="2.2" class="fish-eye"/></>}
  {family === "perch" && <><path d="M20 31C39 13 79 14 103 29 80 47 39 49 20 31Z"/><path d="M23 31 3 16v31Z"/><path d="m42 18 7-15 7 13 8-13 8 14 8-10 5 13M52 45l13 11 15-13"/><circle cx="94" cy="25" r="2.2" class="fish-eye"/></>}
  {family === "catfish" && <><path d="M17 31C37 17 78 17 104 29 81 45 38 47 17 31Z"/><path d="M21 31 2 18v28Z"/><path d="M47 20 65 7l13 13M48 43l17 11 14-13"/><path class="fish-detail" d="M99 31c9 1 13 5 18 10M99 33c8 4 9 9 12 15"/><circle cx="94" cy="27" r="2.2" class="fish-eye"/></>}
  {family === "eel" && <><path d="M5 35c20-29 42 14 69-10 17-15 33-7 42 1-20-4-24 17-43 17C43 43 30 22 5 45Z"/><path d="m105 24 12-9-2 13"/><circle cx="106" cy="26" r="1.8" class="fish-eye"/></>}
  {family === "flatfish" && <><path d="M18 31C37 4 80 6 108 29 80 52 37 54 18 31Z"/><path d="M21 31 3 17v29Z"/><path d="m53 12 13-10 13 11M54 49l13 8 13-10"/><circle cx="91" cy="23" r="2.1" class="fish-eye"/><circle cx="97" cy="26" r="1.7" class="fish-eye"/></>}
  {family === "marine" && <><path d="M18 30C40 14 78 15 101 28l16-5-6 10 5 8-16-5C76 45 39 45 18 30Z"/><path d="M22 30 2 12v36Z"/><path d="m54 17 13-13 12 13M54 43l13 11 12-12"/><circle cx="94" cy="26" r="2.1" class="fish-eye"/></>}
  {family === "generic" && <><path d="M21 29C38 9 78 10 103 29 78 48 38 49 21 29Z"/><path d="m24 29-21-17v35Z"/><path d="M54 15 68 3l10 14M55 44l14 11 10-15"/><circle cx="93" cy="25" r="2.2" class="fish-eye"/></>}
</svg>