---
/**
 * Weicher, handgezeichneter Sektions-Übergang.
 * `color` = Farbe der FOLGENDEN Sektion (die Welle "gehört" der nächsten Fläche).
 * `flip`  = Welle nach unten zeigen lassen.
 */
interface Props {
  color?: string;
  flip?: boolean;
  class?: string;
}
const { color = "var(--color-paper-2)", flip = false, class: cls = "" } = Astro.props;
---

<div class={`wave ${cls}`} style={`--wave: ${color}; ${flip ? "transform: rotate(180deg);" : ""}`} aria-hidden="true">
  <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M0,40 C 180,90 360,0 540,28 C 740,60 900,12 1080,34 C 1260,56 1380,30 1440,42 L1440,80 L0,80 Z"
      fill="var(--wave)"
    />
  </svg>
</div>

<style>
  .wave { line-height: 0; }
  .wave svg { display: block; width: 100%; height: clamp(40px, 6vw, 80px); }
</style>
