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>(
  ({ question, isVisible, children, ...props }, ref): React.ReactElement => {
    const getClassName = () => {
      return "gap-6" + " " + (isVisible ? "block" : "hidden");
    };

    return (
      <View className={getClassName()} {...ref} {...props}>
        <Text size="4xl" position="center" weight="bold">
          {question}
        </Text>
        {children}
      </View>
    );
  }
);