---
interface Props {
  variant?: 'wave' | 'cloud';
  flip?: boolean;
  fill?: string;
}
const { variant = 'wave', flip = false, fill = 'var(--hds-bg)' } = Astro.props;
---
{variant === 'wave' ? (
  <div class={`w-full overflow-hidden leading-none ${flip ? 'rotate-180' : ''}`} aria-hidden="true">
    <svg class="w-full h-12 md:h-16" viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <path style={`fill: ${fill};`} d="M0,32 C240,80 480,0 720,32 C960,64 1200,16 1440,48 L1440,80 L0,80 Z" />
    </svg>
  </div>
) : (
  <div class={`w-full overflow-hidden leading-none ${flip ? 'rotate-180' : ''}`} aria-hidden="true">
    <svg class="w-full h-16 md:h-24" viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <path style={`fill: ${fill};`} d="M0,60 C120,100 240,20 360,50 C480,80 600,30 720,55 C840,80 960,40 1080,60 C1200,80 1320,45 1440,65 L1440,120 L0,120 Z" />
    </svg>
  </div>
)}
