Artifact chip

"use client"

import * as React from "react"
import { ArtifactChip } from "@/components/candor/artifact-chip"

// A kind Candor has no word for ("chart") is named by the app with kindLabel, so it is read "Chart: …".
const artifacts: { id: string; kind: string; kindLabel?: string; title: string; state: "pending" | "open" | "applied" | "rejected" }[] = [
  { id: "a1", kind: "diff", title: "Raise the refund limit to £500", state: "open" },
  { id: "a2", kind: "approval", title: "Refund three duplicate charges", state: "applied" },
  { id: "a3", kind: "table", title: "Orders charged twice in October", state: "pending" },
  { id: "a4", kind: "plan", title: "Move the team to the new rota", state: "rejected" },
  { id: "a5", kind: "chart", kindLabel: "Chart", title: "Refunds by week", state: "open" },
]

export default function Example() {
  const [showing, setShowing] = React.useState<string>("a1")
  return (
    <div className="flex max-w-lg flex-col items-start gap-2">
      {artifacts.map((a) => (
        <ArtifactChip key={a.id} kind={a.kind} kindLabel={a.kindLabel} title={a.title} state={a.state} active={showing === a.id} onOpen={() => setShowing(a.id)} />
      ))}
      <p className="text-xs text-muted-foreground">The panel would show {artifacts.find((a) => a.id === showing)?.title}.</p>
    </div>
  )
}