AI content label

"use client"

import { Copy } from "lucide-react"
import { AiContentLabel, provenanceMetadata, useCopyWithProvenance, type AiProvenance } from "@/components/ai-content-label"
import { Button } from "@/components/ui/button"

const summary: AiProvenance = { involvement: "generated", by: "Drafting agent", at: "2026-11-05T10:00:00Z" }

export default function Example() {
  const { state, copy } = useCopyWithProvenance(summary)
  return (
    <div className="flex max-w-xl flex-col gap-5">
      <div className="flex flex-col gap-2 rounded-lg border p-3 text-sm">
        <div className="flex items-center justify-between gap-2">
          <AiContentLabel {...summary} />
          <Button type="button" variant="ghost" size="xs" onClick={() => copy("Quarterly support volume fell 12%, mostly in billing questions.")}>
            <Copy aria-hidden />
            {state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : "Copy with label"}
          </Button>
        </div>
        <p>Quarterly support volume fell 12%, mostly in billing questions.</p>
      </div>
      <div className="flex flex-wrap gap-2">
        <AiContentLabel involvement="modified" by="Writing assistant" />
        <AiContentLabel involvement="none" />
        <AiContentLabel involvement="unknown" />
      </div>
      <figure className="flex flex-col gap-2">
        <div aria-hidden className="h-24 rounded-md bg-muted" />
        <figcaption>
          <AiContentLabel size="caption" involvement="generated" by="Image tool" at="2026-11-04T16:30:00Z" note="Illustration only; not a photo of a real place." />
        </figcaption>
      </figure>
      <pre className="overflow-x-auto rounded-md bg-muted p-2 text-2xs">{JSON.stringify(provenanceMetadata(summary), null, 2)}</pre>
    </div>
  )
}