"use client"

import * as React from "react"
import { TokenChipInput, type Token } from "@/registry/ui/token-chip-input"

const SUGGESTIONS: Token[] = [
  { id: "name", label: "Full name", kind: "field" },
  { id: "email", label: "Email", kind: "field" },
  { id: "country", label: "Country", kind: "field" },
  { id: "amount", label: "Amount", kind: "number" },
  { id: "status", label: "Status", kind: "enum" },
]

export default function TokenChipInputDemo() {
  const [value, setValue] = React.useState<Token[]>([
    { id: "name", label: "Full name", kind: "field" },
    { id: "email", label: "Email", kind: "field" },
  ])

  return (
    <div className="w-full max-w-md">
      <TokenChipInput value={value} onChange={setValue} suggestions={SUGGESTIONS} />
    </div>
  )
}