interface ArcDividerProps {
  /** Warna section berikutnya — bagian di bawah lengkung diisi warna ini. */
  fill: string;
  flip?: boolean;
  height?: number;
  /** Garis aksen tipis menyusuri lengkungan — dipakai supaya lengkung tetap terlihat jelas
   * meski warna section sebelum & sesudahnya sama-sama gelap/mirip. */
  stroke?: string;
  strokeWidth?: number;
}

/** Divider lengkung lembut antar-section, menggantikan sambungan garis lurus.
 * Overlap negatif ke section sebelumnya bawaan, supaya bagian transparan di atas lengkung
 * menampilkan warna/gradient section sebelumnya, dan bagian terisi menyatu ke section berikutnya. */
export default function ArcDivider({ fill, flip = false, height = 64, stroke, strokeWidth = 2 }: ArcDividerProps) {
  return (
    <div
      aria-hidden="true"
      style={{
        lineHeight: 0,
        position: 'relative',
        marginTop: -height,
        transform: flip ? 'scaleY(-1)' : undefined,
        pointerEvents: 'none',
      }}
    >
      <svg
        viewBox="0 0 1440 100"
        preserveAspectRatio="none"
        width="100%"
        height={height}
        style={{ display: 'block' }}
      >
        <path
          d="M0,40 C240,90 480,0 720,30 C960,60 1200,10 1440,45 L1440,100 L0,100 Z"
          fill={fill}
        />
        {stroke && (
          <path
            d="M0,40 C240,90 480,0 720,30 C960,60 1200,10 1440,45"
            fill="none"
            stroke={stroke}
            strokeWidth={strokeWidth}
            vectorEffect="non-scaling-stroke"
          />
        )}
      </svg>
    </div>
  );
}