"use client";

import * as React from "react"

import { Select, SelectOptionDef } from "./select"

const OPTIONS: SelectOptionDef[] = [

{

label: "Theme",

items: [

{ value: "light", label: "Light" },

{ value: "dark", label: "Dark" },

{ value: "system", label: "System" },

]

},

"divider",

{

label: "Experimental",

items: [

{ value: "high-contrast", label: "High contrast" },

{ value: "custom", label: "Custom theme", disabled: true },

]

}

];

export function SelectDemo() {

const [value, setValue] = React.useState("system")

return (

<div className="w-full h-full flex items-center justify-center p-4 sm:p-6 md:p-8">

<Select

value={value}

onValueChange={setValue}

options={OPTIONS}

/>

</div>

)

}