import Text from "@/components/ui/Text";
import React from "react";
import { View, ViewProps } from "react-native";

export interface QuestionChildProps extends ViewProps {
  isVisible: boolean;
}

interface QuestionProps extends QuestionChildProps {
  question: string;
}

export default React.forwardRef<any, QuestionProps>(
  (props, ref): React.ReactElement => {
    const { question, isVisible, children, ...rest } = props;
    const getClassName = () => {
      return "gap-4" + " " + (isVisible ? "block" : "hidden");
    };

    return (
      <View className={getClassName()} {...ref} {...rest}>
        <Text size="3xl" position="center">
          {question}
        </Text>
        {children}
      </View>
    );
  }
);