import { Radio } from 'lucide-react';
import { Badge } from './ethos/Badge';
import { TrackRow } from './TrackRow';
import type { Track } from '../types';

interface VibeTimelineProps {
  currentTrack: Track | null;
  upcoming: Track[];
}

export function VibeTimeline({ currentTrack, upcoming }: VibeTimelineProps) {
  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2 border-b border-border pb-2">
        <Radio size={14} className="text-accent" />
        <h2 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-muted">Up next</h2>
        <span className="ml-auto font-mono text-xs tabular-nums text-machine">{upcoming.length} buffered</span>
      </div>

      {currentTrack && (
        <div className="relative">
          <TrackRow
            track={currentTrack}
            queue={[currentTrack]}
            index={0}
            showActions={false}
            variant="compact"
          />
          {/* Hidden under 640px: the badge sat on top of the title. The accent
              title and the accent edge already mark the current row. */}
          <Badge color="accent" className="absolute right-2 top-1/2 hidden -translate-y-1/2 sm:block">Now playing</Badge>
        </div>
      )}

      {upcoming.length === 0 ? (
        <div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
          No upcoming tracks buffered yet.
        </div>
      ) : (
        <div className="track-list">
          {upcoming.map((track, i) => (
            <TrackRow
              key={`${track.id}-${i}`}
              track={track}
              queue={upcoming.slice(i)}
              index={0}
              showActions={false}
              variant="compact"
              playable={false}
            />
          ))}
        </div>
      )}
    </div>
  );
}
