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

/** Override the default checkmark via the `indicator` slot prop. */
export function SelectComposableCustomMarker() {
  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}
            indicator={<Icon name="starFill" />}
          />
        ))}
      </Select.Content>
    </Select.Root>
  );
}