---
import { waterbodyVisual } from "../lib/waterbody-visuals";
const { identity, size = 112 } = Astro.props as { identity: string; size?: number };
const visual = waterbodyVisual(identity);
const shores = [
  "M8 57C22 42 34 48 47 34S75 20 91 34s16 7 25-3",
  "M7 48c17-20 34 5 50-10s28-15 38 1 13 14 22 9",
  "M5 54c14-4 20-24 39-18s27-9 40-14 20 11 33 10",
  "M7 42c14 8 25-17 42-8s23 16 35 2 20-13 34-6",
  "M6 51c16-24 31 7 47-8s32-17 41 3 14 11 24 4",
  "M8 38c19-8 26 19 46 8s30-25 42-8 14 11 22 7",
  "M5 56c11-19 25-20 39-5s25-1 37-16 25-10 37 2",
  "M6 47c18 15 31-18 50-5s27 9 37-5 17-15 27-5",
];
---
<svg class="waterbody-mark" width={size} height={Math.round(size * .62)} viewBox="0 0 124 72" aria-hidden="true">
  <path class="waterbody-mark__shore" d={shores[visual.shore]} />
  {visual.waves >= 1 && <path d="M12 59c18-7 31 6 49-2s31-6 51 0" />}
  {visual.waves >= 2 && <path d="M20 65c14-5 27 4 42-2s27-4 43 0" />}
  {visual.waves >= 3 && <path d="M31 70c11-3 21 2 32-1s20-2 30 0" />}
  <circle cx={visual.markerX} cy={visual.markerY} r="3" />
  <text x="111" y="15" text-anchor="end">{visual.code}</text>
</svg>

<style>
  text { fill: currentColor; stroke: none; font: 700 8px Inter, sans-serif; letter-spacing: .08em; }
  :global(.catalog-hero__seal) .waterbody-mark { position: static; right: auto; bottom: auto; opacity: 1; color: var(--lime); stroke: currentColor; }
  :global(.catalog-hero__seal) text { fill: var(--white); }
</style>