import { Pressable, Text, View } from "react-native";

import { Fonts } from "../styles";
import Style, { defaultItemHeight } from "../styles/Style";

const OptionSelector = ({
  optionTypeList = {},
  selected,
  setSelected,
  containerStyle = {},
  colorMap = {},
}) => {
  return (
    <View
      style={{
        ...Style.containerSpaceBetween,
        ...Style.containerItem,
        padding: 0,
        ...containerStyle,
        width: "100%",
      }}
    >
      {Object.entries(optionTypeList).map(([key, value], index) => {
        const isSelected = key === selected;

        return (
          <Pressable
            key={key}
            onPress={() => setSelected(key)}
            style={{
              ...Style.containerItem,
              ...Style.containerCenter,
              flex: 1,
              padding: 0,
              height: defaultItemHeight,
              margin: defaultItemHeight * 0.2,
              backgroundColor: isSelected
                ? colorMap[key]?.secondary
                : "transparent",
              borderWidth: 1,
              borderColor: isSelected ? colorMap[key]?.primary : "transparent",
            }}
          >
            <Text
              style={{
                ...Fonts({ type: "section" }),
              }}
            >
              {value}
            </Text>
          </Pressable>
        );
      })}
    </View>
  );
};

export default OptionSelector;