import React from "react";
import { Select } from "@jobber/components-native";

/** Grouped options with group labels and a separator between groups. */
export function SelectComposableGroupedOptions() {
  return (
    <Select.Root>
      <Select.Label>City</Select.Label>
      <Select.Trigger>
        <Select.Value placeholder="Select a city" />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          <Select.GroupLabel>West</Select.GroupLabel>
          <Select.Item value="van" label="Vancouver" />
          <Select.Item value="cgy" label="Calgary" />
          <Select.Item value="edm" label="Edmonton" />
        </Select.Group>
        <Select.Separator />
        <Select.Group>
          <Select.GroupLabel>East</Select.GroupLabel>
          <Select.Item value="tor" label="Toronto" />
          <Select.Item value="mtl" label="Montreal" />
          <Select.Item value="hal" label="Halifax" />
        </Select.Group>
      </Select.Content>
    </Select.Root>
  );
}