"use client";

import { m } from "motion/react";

// Animated horizontal connector line: a base track through the step centres
// with a single gradient pulse sweeping across uniformly (2.6s — matching the
// Problem beam). The `inset` controls left/right positioning of the line.
export const PipelineConnector = ({ inset }: { inset: string }) => (
  <div
    style={{
      position: "absolute",
      top: 68,
      left: inset,
      right: inset,
      height: 2,
      transform: "translateY(-50%)",
      overflow: "hidden",
      borderRadius: 9999,
      background: "var(--hairline-2)",
      pointerEvents: "none",
    }}
  >
    <m.div
      style={{
        position: "absolute",
        top: 0,
        height: "100%",
        width: "26%",
        borderRadius: 9999,
        background:
          "linear-gradient(to right, transparent, #ff5722, transparent)",
      }}
      initial={{ left: "-26%" }}
      animate={{ left: "100%" }}
      transition={{ duration: 2.6, repeat: Infinity, ease: "linear" }}
    />
  </div>
);