"use client";

interface SectionDividerProps {
  variant?: "wave" | "curve" | "slant" | "zigzag";
  colorClass?: string;
  flip?: boolean;
  className?: string;
  height?: number;
}

export default function SectionDivider({
  variant = "wave",
  colorClass = "fill-white dark:fill-slate-900",
  flip = false,
  className = "",
  height = 80,
}: SectionDividerProps) {
  const paths: Record<string, string> = {
    wave: "M0,64 C320,128 640,0 960,64 C1280,128 1440,32 1440,32 L1440,160 L0,160 Z",
    curve: "M0,128 Q720,0 1440,128 L1440,160 L0,160 Z",
    slant: "M0,160 L1440,64 L1440,160 L0,160 Z",
    zigzag:
      "M0,128 L180,64 L360,128 L540,64 L720,128 L900,64 L1080,128 L1260,64 L1440,128 L1440,160 L0,160 Z",
  };

  return (
    <div
      className={`w-full overflow-hidden leading-[0] ${flip ? "rotate-180" : ""} ${className}`}
      aria-hidden="true"
    >
      <svg
        viewBox="0 0 1440 160"
        preserveAspectRatio="none"
        className="block w-full"
        style={{ height }}
      >
        <path d={paths[variant]} className={colorClass} />
      </svg>
    </div>
  );
}