import { View, StyleSheet } from "react-native";
import { Picker, PickerProps } from "@react-native-picker/picker";
import { Ionicons } from "@expo/vector-icons";

import { colors } from "@/constants/colors";

export const PickerItem = Picker.Item;

interface CustomPickerProps extends PickerProps {
  children?: React.ReactNode;
}

export const CustomPicker = ({
  selectedValue,
  onValueChange,
  children,
}: CustomPickerProps) => {
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        onValueChange={onValueChange}
        style={[styles.pickerStyle, { appearance: "none" } as any]}
      >
        {children}
      </Picker>
      <Ionicons
        name="chevron-down"
        size={20}
        color={colors.darkGray}
        style={styles.customIcon}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  pickerStyle: {
    height: 50,
    width: "100%",
    paddingHorizontal: 10,
    paddingVertical: 5,
    cursor: "pointer",
  },
  customIcon: {
    position: "absolute",
    right: 12,
    top: "50%",
    transform: [{ translateY: -10 }],
    pointerEvents: "none",
  },
});