interface SectionDividerProps {
  variant?: "gradient" | "pulse" | "waveform";
  className?: string;
}

const PULSE_DOTS = ["dot-1", "dot-2", "dot-3", "dot-4", "dot-5"] as const;

export default function SectionDivider({
  variant = "gradient",
  className = "",
}: SectionDividerProps) {
  const rootClassName =
    `section-divider section-divider-${variant} ${className}`.trim();

  if (variant === "gradient") {
    return (
      <div aria-hidden="true" className={rootClassName}>
        <span />
        <span />
      </div>
    );
  }

  if (variant === "pulse") {
    return (
      <div aria-hidden="true" className={rootClassName}>
        {PULSE_DOTS.map((dot) => (
          <span key={dot} />
        ))}
      </div>
    );
  }

  return (
    <div aria-hidden="true" className={rootClassName}>
      <svg viewBox="0 0 1200 60" preserveAspectRatio="none" focusable="false">
        <title>Divisor decorativo</title>
        <path d="M0 30 C100 8 180 52 280 30 S460 8 560 30 740 52 840 30 1020 8 1200 30" />
        <path d="M0 30 C120 48 220 12 340 30 S560 48 680 30 900 12 1020 30 1140 48 1200 30" />
        <path d="M0 30 C80 20 160 40 240 30 S400 20 480 30 640 40 720 30 880 20 960 30 1120 40 1200 30" />
      </svg>
    </div>
  );
}