import React from "react";
import RNPickerSelect from "react-native-picker-select";
import { useTailwind } from "tailwind-rn";
import { Icon } from "@rneui/themed";

export default function Picker({
  value,
  items,
  onChange,
  placeholder = { label: "未填写", value: "" },
}) {
  const tailwind = useTailwind();
  return (
    <RNPickerSelect
      style={{
        placeholder: tailwind("text-[#FFFFFF80]"),
        inputIOS: tailwind(
          "text-base text-white font-medium text-right pr-6 pb-2"
        ),
        inputAndroid: tailwind(
          "text-base text-white font-medium text-right pr-6"
        ),
      }}
      Icon={() => (
        <Icon
          containerStyle={{
            height: 30,
            ...tailwind("flex items-center justify-center"),
          }}
          name="caret-down"
          type="ionicon"
          color="white"
          size={14}
        />
      )}
      doneText="完成"
      useNativeAndroidPickerStyle={false}
      fixAndroidTouchableBug={true}
      placeholder={placeholder}
      value={value}
      onValueChange={onChange}
      items={items}
    />
  );
}