"use client"

import * as React from "react"
import { AsyncCombobox } from "@/registry/ui/async-combobox"

const ITEMS = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "nuxt", label: "Nuxt" },
  { value: "svelte", label: "SvelteKit" },
  { value: "solid", label: "SolidStart" },
]

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

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <AsyncCombobox
        items={ITEMS}
        value={value}
        onChange={setValue}
        placeholder="Select a framework…"
        searchPlaceholder="Search frameworks…"
        emptyText="No frameworks found."
      />
      <p className="text-xs text-muted-foreground">
        Selected:{" "}
        <span className="font-medium text-foreground">{value ?? "none"}</span>
      </p>
    </div>
  )
}