Select

"use client";

import { useState } from "react";
import { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from "../components/ui/select";

export default function SelectGroupedDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <Select value={value} onValueChange={setValue}>
        <SelectTrigger placeholder="Select language…" />
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Frontend</SelectLabel>
            <SelectItem index={0} value="typescript">TypeScript</SelectItem>
            <SelectItem index={1} value="javascript">JavaScript</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Backend</SelectLabel>
            <SelectItem index={2} value="python">Python</SelectItem>
            <SelectItem index={3} value="go">Go</SelectItem>
            <SelectItem index={4} value="rust">Rust</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}