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

/** Shared option shape + data for the composable `Select` docs examples. */
export interface ProvinceOption {
  value: string;
  label: string;
}

export const PROVINCES: ProvinceOption[] = [
  { value: "ab", label: "Alberta" },
  { value: "bc", label: "British Columbia" },
  { value: "mb", label: "Manitoba" },
  { value: "nb", label: "New Brunswick" },
  { value: "nl", label: "Newfoundland and Labrador" },
  { value: "ns", label: "Nova Scotia" },
  { value: "on", label: "Ontario" },
  { value: "pe", label: "Prince Edward Island" },
  { value: "qc", label: "Quebec" },
  { value: "sk", label: "Saskatchewan" },
];

/** The province options rendered as `Select.Item`s. */
export function ProvinceItems() {
  return (
    <>
      {PROVINCES.map(province => (
        <Select.Item
          key={province.value}
          value={province.value}
          label={province.label}
        />
      ))}
    </>
  );
}