import * as React from 'react';
import { clsx } from 'clsx';
import { StatusBadge, type StatusTone } from './StatusBadge.js';

export interface TimelineItem {
  id: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  meta?: React.ReactNode;
  status?: React.ReactNode;
  tone?: StatusTone;
}

export interface TimelineProps extends React.HTMLAttributes<HTMLElement> {
  items: TimelineItem[];
  emptyLabel?: string;
}

export function Timeline({
  items,
  emptyLabel = 'No activity yet.',
  className,
  ...props
}: TimelineProps) {
  if (items.length === 0) {
    return (
      <section className={clsx('text-sm text-[var(--bl-text-secondary)]', className)} {...props}>
        {emptyLabel}
      </section>
    );
  }

  return (
    <section className={clsx('grid gap-3', className)} {...props}>
      {items.map(item => (
        <article key={item.id} className="grid grid-cols-[auto_1fr] gap-3">
          <span
            aria-hidden="true"
            className="mt-1 h-2.5 w-2.5 rounded-full bg-[var(--bl-accent)]"
          />
          <div className="grid gap-1 rounded-md border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-3">
            <div className="flex flex-wrap items-start justify-between gap-2">
              <strong className="text-sm text-[var(--bl-text-primary)]">{item.title}</strong>
              {item.meta && (
                <span className="text-xs text-[var(--bl-text-secondary)]">{item.meta}</span>
              )}
            </div>
            {item.description && (
              <div className="text-sm text-[var(--bl-text-secondary)]">{item.description}</div>
            )}
            {item.status && (
              <StatusBadge tone={item.tone} className="w-fit">
                {item.status}
              </StatusBadge>
            )}
          </div>
        </article>
      ))}
    </section>
  );
}
