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

/** Validation: the `error` message and critical styling clear once selected. */
export function SelectComposableValidationFlow() {
  const [value, setValue] = useState<ProvinceOption | undefined>();

  return (
    <Select.Root
      value={value}
      onValueChange={option => setValue(option as ProvinceOption | undefined)}
      error={value ? undefined : "Please select a province."}
    >
      <Select.Label>Province</Select.Label>
      <Select.Trigger>
        <Select.Value placeholder="Select a province" />
      </Select.Trigger>
      <Select.Content>
        <ProvinceItems />
      </Select.Content>
    </Select.Root>
  );
}