import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import type { TaskEvent } from "@/lib/task"

/**
 * What has happened, as the sequence it is.
 *
 * A flat list hides that these are steps: each one has somebody who did it and
 * a moment it happened. The rail carries the order, the last dot is the state
 * the task is in now.
 */
export function TaskHistory({ events }: { events: TaskEvent[] }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>What has happened</CardTitle>
      </CardHeader>
      <CardContent>
        <ol className="flex flex-col">
          {events.map((event, index) => {
            const last = index === events.length - 1
            return (
              <li key={`${event.at}-${event.what}`} className="flex gap-4">
                <div className="flex flex-col items-center" aria-hidden="true">
                  <span
                    className={
                      last
                        ? "mt-2 size-3 shrink-0 rounded-full bg-primary ring-4 ring-primary/20"
                        : "mt-2 size-3 shrink-0 rounded-full bg-foreground/25"
                    }
                  />
                  {last ? null : (
                    <span className="w-px flex-1 bg-foreground/15" />
                  )}
                </div>
                <div
                  className={
                    last
                      ? "flex max-w-prose flex-col gap-0.5"
                      : "flex max-w-prose flex-col gap-0.5 pb-6"
                  }
                >
                  <span className="font-medium">{event.what}</span>
                  <span className="text-foreground/70">
                    {event.who}, {event.at}
                  </span>
                </div>
              </li>
            )
          })}
        </ol>
      </CardContent>
    </Card>
  )
}