Theme

"use client"

import { Message } from "@/components/message"
import type { Message as MessageData } from "@/lib/chat"

const roles = ["background", "card", "muted", "primary", "accent-weak", "success", "warning", "destructive", "attention"]

const reply: MessageData = {
  id: "m1",
  author: { role: "agent", agent: { id: "a", name: "Support agent", role: "assistant" } },
  status: "complete",
  blocks: [{ kind: "paragraph", nodes: [{ kind: "text", text: "Your order shipped yesterday and arrives within two days." }] }],
}

export default function Example() {
  return (
    <div className="flex flex-col gap-6">
      <div className="grid grid-cols-3 gap-3 sm:grid-cols-5">
        {roles.map((r) => (
          <div key={r} className="flex flex-col gap-1.5">
            <div className="h-12 rounded-lg border" style={{ background: `var(--${r})` }} />
            <code className="text-xs text-muted-foreground">--{r}</code>
          </div>
        ))}
        {[1, 2, 3, 4, 5, 6].map((n) => (
          <div key={n} className="flex flex-col gap-1.5">
            <div className="h-12 rounded-lg" style={{ background: `var(--series-${n})` }} />
            <code className="text-xs text-muted-foreground">--series-{n}</code>
          </div>
        ))}
      </div>
      {/* Size tokens: the default, and the compact preset (data-density="compact"). */}
      <div className="grid gap-4 sm:grid-cols-2">
        {(["default", "compact"] as const).map((density) => (
          <section key={density} aria-label={`${density} density`} data-density={density === "compact" ? "compact" : undefined} className="flex flex-col gap-2 rounded-lg border p-3">
            <code className="text-xs text-muted-foreground">{density === "compact" ? 'data-density="compact"' : "--cd-text-prose, --cd-thread-width"}</code>
            <Message message={reply} />
          </section>
        ))}
      </div>
    </div>
  )
}