---
type IconName = "hook" | "float" | "trophy" | "plus" | "pin" | "clock" | "ripple" | "angler" | "scale" | "lure" | "arrow";
const { name, size = 18, label } = Astro.props as { name: IconName; size?: number; label?: string };
---
<svg class={`fish-icon fish-icon--${name}`} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden={label ? undefined : "true"} role={label ? "img" : undefined} aria-label={label}>
  {name === "hook" && <><path d="M15 3v11a6 6 0 1 1-6-6"/><path d="m6 9 3-1 1 3"/><path d="M15 3h3"/></>}
  {name === "float" && <><path d="M12 2v3M12 19v3"/><path d="M12 5c2.2 0 3 2.8 3 6s-.8 8-3 8-3-4.8-3-8 .8-6 3-6Z"/><path d="M9.2 11h5.6"/></>}
  {name === "trophy" && <><path d="M8 4h8v4a4 4 0 0 1-8 0V4Z"/><path d="M8 6H5c0 3 1.5 5 4.5 5M16 6h3c0 3-1.5 5-4.5 5M12 12v5M8 20h8M9 17h6"/></>}
  {name === "plus" && <><path d="M12 5v14M5 12h14"/><circle cx="12" cy="12" r="9"/></>}
  {name === "pin" && <><path d="M12 21s6-6.1 6-12a6 6 0 1 0-12 0c0 5.9 6 12 6 12Z"/><circle cx="12" cy="9" r="2"/></>}
  {name === "clock" && <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>}
  {name === "ripple" && <><circle cx="12" cy="12" r="2"/><path d="M6.6 8.4A6.5 6.5 0 0 0 5.5 12c0 1.3.4 2.5 1.1 3.6M17.4 8.4a6.5 6.5 0 0 1 1.1 3.6c0 1.3-.4 2.5-1.1 3.6M3.5 5.7A10 10 0 0 0 2 12c0 2.4.8 4.6 2.1 6.3M20.5 5.7A10 10 0 0 1 22 12c0 2.4-.8 4.6-2.1 6.3"/></>}
  {name === "angler" && <><circle cx="9" cy="6" r="2"/><path d="m8 9-2 5 4 2 2 5M8 12l5 2M13 14l5-8M17 6c2 3 3 6 3 10"/></>}
  {name === "scale" && <><path d="M12 3v18M7 6h10M6 6l-3 6h6L6 6ZM18 6l-3 6h6l-3-6ZM8 21h8"/></>}
  {name === "lure" && <><path d="M9 4c4 1 7 5 6 10s-5 7-8 4 1-7 2-14Z"/><path d="m14 8 4-2M8 18c0 3 4 3 4 0"/></>}
  {name === "arrow" && <><path d="M5 12h14M14 7l5 5-5 5"/></>}
</svg>