Mobile/components/quiz/GenderQuestion.tsx

import React from "react";
import Question, { QuestionChildProps } from "./Question";
import Checkbox from "../CheckboxComponent";
import {View} from "react-native";
import {FontAwesome6} from "@expo/vector-icons";

export default React.forwardRef<any, QuestionChildProps>(
    (props, ref): React.ReactElement => {
        const { ...rest } = props;

        const [checkedOne, setCheckedOne] = React.useState(false);
        const [checkedTwo, setCheckedTwo] = React.useState(false);
        const [checkedThree, setCheckedThree] = React.useState(false);
        const handleChangeOne = () => {
            setCheckedOne(!checkedOne);
        };
        const handleChangeTwo = () => {
            setCheckedTwo(!checkedTwo);
        };
        const handleChangeThree = () => {
            setCheckedThree(!checkedThree);
        };

        return (
            <Question
                question="Quel est votre genre physiologique ?"
                {...ref}
                {...rest}
            >
                <View>
                    <Checkbox label="Homme" value={checkedOne} onChange={handleChangeOne} icon={"man"} />
                    <Checkbox label="Femme" value={checkedTwo} onChange={handleChangeTwo} icon={"woman"} />
                    <Checkbox label="Je ne préfère pas répondre" value={checkedThree} onChange={handleChangeThree} icon={"minuscircle"} />
                </View>
            </Question>
        );
    }
);