Citation

'use client';

import * as React from 'react';
import { Citation, type CitationSource } from './citation';

const SOURCES: CitationSource[] = [
  {
    title: 'Protected bike lanes and street safety',
    url: 'https://www.citystreets.example/reports/bike-lanes',
    snippet:
      'Streets with a physical barrier saw far fewer crashes involving people on bikes than streets with paint only.',
  },
  {
    title: 'How many people ride to work, by city',
    url: 'https://www.commutedata.example/ride-share',
    snippet: 'Ride counts rose most in cities that finished a connected network, not single short lanes.',
  },
  {
    title: 'Planning notes from the transport office',
    url: 'https://www.transportoffice.example/notes/2026',
  },
];

// Replay opens the first card, then the second, then the one that is not available.
const SCRIPT: [at: number, open: number | null][] = [
  [400, 0],
  [2400, 1],
  [4400, 2],
  [6400, null],
];

export default function CitationDemo({ replay = 0 }: { replay?: number }) {
  const [open, setOpen] = React.useState<number | null>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    const timers = SCRIPT.map(([at, index]) => window.setTimeout(() => setOpen(index), at));
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  const marker = (index: number, status: 'available' | 'unavailable' = 'available') => (
    <Citation
      label={index + 1}
      source={SOURCES[index]}
      status={status}
      open={open === index}
      onOpenChange={(next) => setOpen((now) => (next ? index : now === index ? null : now))}
    />
  );

  return (
    <p className="m-0 w-full max-w-[520px] text-md leading-7 text-secondary">
      Cities that build bike lanes as a connected network see more daily riders {marker(0)}. Lanes that keep a
      physical barrier between bikes and cars also record fewer serious crashes {marker(1)}. A few early plans
      have not been published yet {marker(2, 'unavailable')}.
    </p>
  );
}