import type { LaneState } from "yt-dlp-transcript-common/views/laneState";

// The signature element: a hairline that reads left → right as FEED → GATE →
// LANE. It exists to say the thing the status word cannot — *where* the flow
// stops. A held lane is not a stopped one, and the difference is a break at the
// gate with the feed still lit behind it.
//
// Continuous with the channel page's transit line rather than imported from
// anywhere: same tokens, same dot vocabulary, same single animation.
//
// aria-hidden by construction. The dot and the state word beside it carry the
// meaning; this is the drawing of it.
export function LaneRail({ state }: { state: LaneState }) {
  return (
    <div aria-hidden="true" className="flex h-2 items-center">
      {state === "running" && (
        <>
          <span className="h-0.5 flex-1 bg-info" />
          {/* The gate, open: the pulse is sitting in it. */}
          <span className="relative flex h-2 w-0.5 items-center justify-center bg-info">
            <span className="absolute h-1.5 w-1.5 rounded-full bg-info animate-pulse motion-reduce:animate-none" />
          </span>
          <span className="h-0.5 flex-[2] bg-info" />
        </>
      )}
      {state === "holding" && (
        <>
          {/* Feed still running… */}
          <span className="h-0.5 flex-1 bg-warning" />
          {/* …into a shut gate… */}
          <span className="h-2 w-0.5 bg-warning" />
          {/* …and the break is the point: nothing is moving past it. */}
          <span className="w-2" />
          <span className="h-0 flex-[2] border-t border-dashed border-border" />
        </>
      )}
      {state === "idle" && (
        <span className="h-0 flex-1 border-t border-dashed border-border" />
      )}
      {state === "unavailable" && <span className="h-px flex-1 bg-border" />}
    </div>
  );
}