"use client";
import { Combobox } from "@/components/godui/combobox";

const frameworks = [
{ label: "Next.js", value: "next", description: "The React framework" },
{ label: "Remix", value: "remix", description: "Full-stack web framework" },
{ label: "Astro", value: "astro", description: "Content-driven sites" },
];

export function FrameworkSearch() {
return (
  <Combobox
    placeholder="Search frameworks…"
    onSearch={async (q) => {
      const res = await fetch(`/api/search?q=${q}`);
      return res.json();
    }}
  />
);
}

"use client";
import { Combobox } from "@/components/godui/combobox";

const people = [
{ label: "Ada Lovelace", value: "ada", description: "Owner" },
{ label: "Linus Torvalds", value: "linus", description: "Admin" },
];

export function DisabledPicker() {
return <Combobox options={people} placeholder="Assign to…" disabled />;
}

"use client";
import { Combobox } from "@/components/godui/combobox";
import { useState } from "react";

const people = [
{ label: "Ada Lovelace", value: "ada" },
{ label: "Grace Hopper", value: "grace" },
{ label: "Alan Turing", value: "alan" },
];

export function Reviewers() {
const [values, setValues] = useState(["ada"]);
return (
  <Combobox
    multiple
    options={people}
    values={values}
    onToggle={(v) =>
      setValues((prev) =>
        prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v],
      )
    }
    placeholder="Add reviewers…"
  />
);
}

"use client";
import { Combobox } from "@/components/godui/combobox";
import { useState } from "react";

const people = [
{ label: "Ada Lovelace", value: "ada" },
{ label: "Grace Hopper", value: "grace" },
];

export function LabelPicker() {
const [options, setOptions] = useState(people);
const [value, setValue] = useState("");
return (
  <Combobox
    creatable
    options={options}
    value={value}
    onChange={setValue}
    onCreate={async (label) => {
      // The create row spins until this resolves, then selects the new option.
      await saveToServer(label);
      const created = { label, value: label.toLowerCase() };
      setOptions((prev) => [...prev, created]);
      setValue(created.value);
    }}
    placeholder="Pick or type a new one…"
  />
);
}

"use client";
import { Combobox } from "@/components/godui/combobox";
import { useState } from "react";

const sizes = [
{ label: "Extra small", value: "xs" },
{ label: "Small", value: "sm" },
{ label: "Medium", value: "md" },
{ label: "Large", value: "lg" },
];

export function SizePicker() {
const [value, setValue] = useState("md");
return <Combobox options={sizes} value={value} onChange={setValue} />;
}

"use client";
import { Combobox } from "@/components/godui/combobox";
import { useState } from "react";

const people = [
{ label: "Ada Lovelace", value: "ada" },
{ label: "Grace Hopper", value: "grace" },
];

export function AssigneePicker() {
const [value, setValue] = useState("");
return (
  <Combobox
    options={people}
    value={value}
    onChange={setValue}
    placeholder="Assign to…"
    pinnedAction={{ label: "Manage team →", onSelect: () => {} }}
  />
);
}

"use client";
import { Combobox } from "@/components/godui/combobox";
import { useState } from "react";

const people = [
{ label: "Ada Lovelace", value: "ada" },
{ label: "Grace Hopper", value: "grace" },
];

export function AssigneePicker() {
const [value, setValue] = useState("");
return (
  <Combobox
    options={people}
    value={value}
    onChange={setValue}
    placeholder="Assign to…"
    emptyMessage="No teammates found"
    emptyAction={{ label: "Invite someone", onSelect: () => {} }}
  />
);
}