import React from "react";
import { Icon, Select, Text } from "@jobber/components-native";
import { PROVINCES } from "./SelectComposableProvinces";

/** `Select.ItemPrefix` / `Select.ItemSuffix` slots passed into `Select.Item`. */
export function SelectComposableItemPrefixSuffix() {
  return (
    <Select.Root defaultValue={PROVINCES[0]}>
      <Select.Label>Province</Select.Label>
      <Select.Trigger>
        <Select.Value placeholder="Select a province" />
      </Select.Trigger>
      <Select.Content>
        {PROVINCES.map(province => (
          <Select.Item
            key={province.value}
            value={province.value}
            label={province.label}
            prefix={
              <Select.ItemPrefix>
                <Icon name="home" />
              </Select.ItemPrefix>
            }
            suffix={
              <Select.ItemSuffix>
                <Text variation="subdued">{province.value.toUpperCase()}</Text>
              </Select.ItemSuffix>
            }
          />
        ))}
      </Select.Content>
    </Select.Root>
  );
}