import {
  FormField,
  Input,
  SearchInput,
  Textarea,
  Select,
  SearchableDropdown,
  Checkbox,
  Switch,
  Radio,
  RadioGroup,
  FileUpload,
  Slider,
  Combobox,
} from "@/app/components/ui";

<FormField label="Field" hint="Optional hint">
  <Input placeholder="Inside FormField" />
</FormField>
<FormField label="Required" error="This field is required">
  <Input />
</FormField>

<Input placeholder="Placeholder" />
<Input placeholder="Disabled" disabled />

<SearchInput placeholder="Search..." />

<Textarea label="Message" placeholder="Enter text..." rows={3} />

const options = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
];

<Select label="Choose" options={options} placeholder="Select..." />

const countryOptions = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
];

<SearchableDropdown
  label="Country"
  options={countryOptions}
  value={value}
  onChange={setValue}
  placeholder="Select country..."
  searchPlaceholder="Search..."
/>

<Checkbox label="Accept terms" />
<Switch checked={checked} onCheckedChange={setChecked} label="Toggle" />

<Radio
  name="demo"
  options={[
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
  value={value}
  onChange={setValue}
/>

<RadioGroup
  name="radiogroup"
  label="Choose one"
  options={[
    { value: "opt1", label: "Option 1" },
    { value: "opt2", label: "Option 2" },
  ]}
  value={value}
  onChange={setValue}
  hint="Optional hint"
/>

<FileUpload label="Upload" hint="Drag and drop or click" />

<Slider value={value} onValueChange={setValue} min={0} max={100} />
<span>{value}</span>

<Combobox
  value={value}
  onChange={setValue}
  open={open}
  onOpenChange={setOpen}
  options={["Apple", "Banana", "Cherry"]}
  placeholder="Type or choose..."
  label="Fruit"
/>