/**
 * Decorative wave SVG between sections.
 * `flip` mirrors the wave vertically.
 * `fromColor` and `toColor` set the CSS fill accordingly.
 */

type WaveDividerProps = {
  /** Fill color — use CSS variable or tailwind class value */
  fill?: string;
  /** Flip vertically (place at bottom of a dark section going to light) */
  flip?: boolean;
  className?: string;
};

export function WaveDivider({
  fill = "var(--background)",
  flip = false,
  className = "",
}: WaveDividerProps) {
  return (
    <div
      className={`section-divider ${className}`}
      style={{ transform: flip ? "rotate(180deg)" : undefined }}
    >
      <svg
        viewBox="0 0 1440 58"
        preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0,0 C360,58 1080,0 1440,44 L1440,58 L0,58 Z"
          fill={fill}
        />
      </svg>
    </div>
  );
}