"use client"

import * as React from "react"
import { TreePicker, type TreeNode } from "@/registry/ui/tree-picker"

const NODES: TreeNode[] = [
  {
    id: "fruit",
    label: "Fruit",
    children: [
      { id: "apple", label: "Apple" },
      { id: "banana", label: "Banana" },
      { id: "cherry", label: "Cherry" },
    ],
  },
  {
    id: "vegetable",
    label: "Vegetable",
    children: [
      { id: "carrot", label: "Carrot" },
      { id: "potato", label: "Potato" },
    ],
  },
]

export default function TreePickerDemo() {
  const [value, setValue] = React.useState<string>()

  return (
    <div className="w-full max-w-xs">
      <TreePicker
        nodes={NODES}
        value={value}
        onChange={setValue}
        placeholder="Pick an item…"
        searchPlaceholder="Search items…"
      />
    </div>
  )
}