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

/** Read-only: non-interactive, value rendered as text with no chevron. */
export function SelectComposableReadOnly() {
  return (
    <Select.Root readOnly defaultValue={PROVINCES[6]}>
      <Select.Label>Province</Select.Label>
      <Select.Trigger>
        <Select.Value placeholder="Select a province" />
      </Select.Trigger>
      <Select.Content>
        <ProvinceItems />
      </Select.Content>
    </Select.Root>
  );
}