/** مسیرِ منحنیِ بینِ خانه‌های نقشه (مختصاتِ x به درصد، y به پیکسل). */
export interface Point { x: number; y: number }

export function zigzagPositions(count: number, spacingY: number, startY = 80): Point[] {
  const xs = [50, 74, 46, 26, 54, 76, 48, 28];
  return Array.from({ length: count }, (_, i) => ({ x: xs[i % xs.length], y: startY + i * spacingY }));
}

export function ZigzagPath({
  points,
  height,
  colorOf,
}: {
  points: Point[];
  height: number;
  /** رنگِ تکه‌ی i (از نقطه‌ی i به i+1)؛ null یعنی خاکستری. */
  colorOf: (i: number) => string | null;
}) {
  const segments = points.slice(0, -1).map((p1, i) => {
    const p2 = points[i + 1];
    const midY = (p1.y + p2.y) / 2;
    return { d: `M ${p1.x} ${p1.y} C ${p1.x} ${midY}, ${p2.x} ${midY}, ${p2.x} ${p2.y}`, color: colorOf(i) };
  });
  return (
    <svg className="pointer-events-none absolute inset-0" width="100%" height={height} viewBox={`0 0 100 ${height}`} preserveAspectRatio="none" aria-hidden>
      {segments.map((s, i) => (
        <path key={`s${i}`} d={s.d} fill="none" stroke="#d7d5e8" strokeWidth="10" strokeLinecap="round" opacity="0.4" vectorEffect="non-scaling-stroke" />
      ))}
      {segments.map((s, i) => (
        <path key={`p${i}`} d={s.d} fill="none" stroke={s.color ?? '#dedced'} strokeWidth="7" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
      ))}
    </svg>
  );
}