---
/*
  The signature "trace" (A1): a thin accent line that draws on load, steps down,
  and terminates in a lit status dot. Static under reduced motion / repeat visits.
*/
interface Props {
  statusLine: string;
  class?: string;
}
const { statusLine, class: cls } = Astro.props;
---

<div class:list={['flex items-center gap-3', cls]}>
  <svg width="200" height="24" viewBox="0 0 200 24" fill="none" aria-hidden="true">
    <path
      class="trace-line"
      d="M2 12 H150 l10 10 H194"
      stroke="var(--accent)"
      stroke-width="1.5"
      style="--trace-len: 212"
    ></path>
    <circle class="trace-dot status-dot--active" cx="196" cy="22" r="4" fill="var(--accent)"
    ></circle>
  </svg>
  <span class="mono-meta">{statusLine}</span>
</div>
