import { View, Text, StyleSheet } from "react-native";
import { IOption } from "../../common/domain/entities/option";
import { MultipleOptionPicker } from "./multiple_option_pickeer";

interface InterestSlideProps {
  options: IOption[];
  onToogleOption: (optionId: number) => void;
}

export const InterestSlide = ({ options, onToogleOption }: InterestSlideProps) => {
  return (
    <View style={styles.container}>
      <Text>
        Selecciona las categorías que te interesan, puedes cambiarlos en la
        pestaña de
        <Text
          style={{ fontWeight: "bold" }}
        >{` Cuenta > Cambiar intereses`}</Text>
      </Text>
      <MultipleOptionPicker options={options} toogleOption={onToogleOption} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
