/**
 * SectionDivider
 *
 * A soft wave SVG divider used to smoothly transition between two
 * adjacent page sections. Designed to sit at the very TOP of a section.
 *
 * Props
 * - from: the CSS color of the PREVIOUS section (the wave fills in this color,
 *         so it "eats into" the current section). Defaults to white.
 * - to:   the CSS color of the CURRENT section background (unused for rendering
 *         but kept as a semantic hint for callers).
 * - flip: if true, flips the wave vertically for variety.
 * - height: px height of the wave area. Default 80.
 *
 * Usage
 *   <section className="bg-slate-50 relative">
 *     <SectionDivider from="#ffffff" />
 *     ...content...
 *   </section>
 */
interface SectionDividerProps {
  from?: string;
  flip?: boolean;
  height?: number;
  className?: string;
}

export default function SectionDivider({
  from = "#ffffff",
  flip = false,
  height = 80,
  className = "",
}: SectionDividerProps) {
  return (
    <div
      aria-hidden="true"
      className={`pointer-events-none absolute top-0 left-0 w-full overflow-hidden leading-[0] ${className}`}
      style={{ height, transform: flip ? "scaleY(-1)" : undefined }}
    >
      <svg
        viewBox="0 0 1440 80"
        preserveAspectRatio="none"
        className="block w-full h-full"
      >
        <path
          d="M0,32 C240,80 480,0 720,32 C960,64 1200,16 1440,40 L1440,0 L0,0 Z"
          fill={from}
        />
      </svg>
    </div>
  );
}