Trace

import { CircleCheckIcon, CircleXIcon, SearchIcon } from "lucide-react"

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceDescription,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

// The steps an assistant takes: done, failed and still running.
export default function TraceDemo() {
  return (
    <Trace className="w-full max-w-sm">
      <TraceLine>
        <TraceIcon>
          <CircleCheckIcon className="text-mac-green" />
        </TraceIcon>
        <TraceTitle>Searched your Documents</TraceTitle>
        <TraceDescription>0,4 s</TraceDescription>
      </TraceLine>
      <TraceCollapsible>
        <TraceCollapsibleTrigger>
          <TraceLine>
            <TraceIcon>
              <SearchIcon />
            </TraceIcon>
            <TraceTitle>Read 3 files</TraceTitle>
          </TraceLine>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>Roadmap.key, Notes.txt and Budget 2027.numbers</TraceCollapsibleContent>
      </TraceCollapsible>
      <TraceLine status="error">
        <TraceIcon>
          <CircleXIcon />
        </TraceIcon>
        <TraceTitle>Couldn’t open Archive.zip</TraceTitle>
      </TraceLine>
      <TraceLine status="running">
        <TraceTitle>Writing a summary…</TraceTitle>
      </TraceLine>
    </Trace>
  )
}