"use client"

import { useState } from "react"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { Combobox } from "@/components/ui/combobox"

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "angular", label: "Angular" },
  { value: "vue", label: "Vue.js" },
  { value: "react", label: "React" },
  { value: "solid", label: "SolidJS" },
  { value: "svelte", label: "Svelte" },
]

export function ComboboxSection() {
  const [value, setValue] = useState("")

  return (
    <section id="combobox" className="scroll-mt-16">
      <SectionHeading
        title="Combobox"
        description="Autocomplete input and command palette with a list of suggestions."
      />

      <ComponentContainer
        title="Basic Combobox"
        description="A combobox with a list of options. Click to open the dropdown and select an option."
        code={`import { Combobox } from "@/components/ui/combobox"
import { useState } from "react"

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  // More options...
]

export function ComboboxDemo() {
  const [value, setValue] = useState("")

  return (
    <Combobox
      options={frameworks}
      value={value}
      onValueChange={setValue}
      placeholder="Select framework"
    />
  )
}`}
      >
        <div className="flex justify-center p-8">
          <div className="w-[300px]">
            <Combobox options={frameworks} value={value} onValueChange={setValue} placeholder="Select framework" />
          </div>
        </div>
      </ComponentContainer>
    </section>
  )
}