import clsx from "clsx";

export interface PulseLineProps {
  className?: string;
  /** 24px-tall section-divider variant (default is the 48px hero trace) */
  compact?: boolean;
}

const TRACE =
  "M0 30 H96 L106 30 L112 24 L120 30 H180 L190 30 L198 8 L206 44 L214 30 H320 L330 27 L338 30 H430 L440 30 L448 6 L456 45 L464 30 H580 L590 26 L598 30 H672 L680 30 L688 12 L696 40 L702 30 H800";

/**
 * Signature ECG pulse trace. Inline SVG, --accent stroke. Three layers:
 * a blurred phosphor glow, the dim base path that draws itself once on
 * load (pathLength=1 + .draw-line), and a short bright tracer sweeping
 * forever (.pulse-sweep — hidden under prefers-reduced-motion).
 * Decorative: aria-hidden, stretches to container width.
 */
export default function PulseLine({ className, compact }: PulseLineProps) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 800 48"
      preserveAspectRatio="none"
      className={clsx("block w-full", compact ? "h-6" : "h-12", className)}
    >
      {/* phosphor glow under-layer */}
      <path
        d={TRACE}
        fill="none"
        stroke="var(--accent)"
        strokeOpacity={0.25}
        strokeWidth="2.5"
        strokeLinejoin="round"
        strokeLinecap="round"
        vectorEffect="non-scaling-stroke"
        style={{ filter: "blur(3px)" }}
      />
      {/* dim base path: one-shot draw on load */}
      <path
        d={TRACE}
        fill="none"
        stroke="var(--accent)"
        strokeOpacity={0.45}
        strokeWidth="1.5"
        strokeLinejoin="round"
        strokeLinecap="round"
        vectorEffect="non-scaling-stroke"
        pathLength={1}
        className="draw-line"
      />
      {/* bright tracer: infinite slow sweep */}
      <path
        d={TRACE}
        fill="none"
        stroke="var(--accent)"
        strokeWidth="1.5"
        strokeLinejoin="round"
        strokeLinecap="round"
        vectorEffect="non-scaling-stroke"
        pathLength={1}
        className="pulse-sweep"
      />
    </svg>
  );
}