---
// Deprecated for Phase 2: no longer rendered on /pulse. The activity table
// and its write hooks remain — kept around in case we resurface this later
// or build an admin debug view that streams from it.
import type { TickerItem } from '../lib/format';

interface Props {
  items: TickerItem[];
}

const { items } = Astro.props;
// Duplicate the list so the keyframe translateX(-50%) lands at the start of
// the second copy, giving a seamless wrap. If empty, render nothing — the
// page hides the strip entirely rather than showing "no activity".
const doubled = items.length > 0 ? [...items, ...items] : [];
---
{items.length > 0 && (
  <div class="ticker" aria-label="Recent council activity">
    <div class="ticker-track">
      {doubled.map((it) => (
        <span class="ticker-item">
          <span class="ticker-dot" style={`background:${it.dotColor}`} aria-hidden="true"></span>
          <span class="ticker-name">{it.name}</span>
          <span class="ticker-phrase">{it.phrase}</span>
          <span class="ticker-time label-sm">{it.relative}</span>
        </span>
      ))}
    </div>
  </div>
)}

<style>
  .ticker {
    position: relative;
    overflow: hidden;
    padding: var(--space-3) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  }

  .ticker-track {
    display: inline-flex;
    gap: var(--space-6);
    white-space: nowrap;
    animation: ticker-scroll 38s linear infinite;
    will-change: transform;
  }

  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }

  @keyframes ticker-scroll {
    from { transform: translateX(0);    }
    to   { transform: translateX(-50%); }
  }

  .ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-body-sm);
    color: var(--on-surface-variant);
  }

  .ticker-dot {
    align-self: center;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .ticker-name {
    font-weight: 600;
    color: var(--on-surface);
  }

  .ticker-phrase {
    color: var(--on-surface-variant);
  }

  .ticker-time {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
  }

  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
  }
</style>
