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

import {Entypo} from "@expo/vector-icons";

export interface ProblemProps extends ViewProps{
    picture: string;
    problem: string;
    description: string;
    information: string;
    isVisible?: boolean;
}

export default forwardRef<any, ProblemProps> (({className, ...Props}, ref) => {
    return (
        <View className={"gap-4 justify-between h-3/4" + " " + className} {...Props} ref={ref}>
            <View className="flex-row justify-between items-center p-4">
                <BackButton/>
            </View>

            <View className="flex-row justify-center">
                <Image className="aspect-square w-3/5 h-3/5" source={Props.picture}/>
            </View>

            <Text position="center" weight="bold" size="3xl"> {Props.problem} </Text>
            <Text size="lg" position="center" className="text-gray-400"> {Props.description} </Text>
            <View className="flex-row justify-center">
                <View className="flex-row items-center border-2 rounded-2xl bg-red-300 border-red-600 p-4">
                    <Entypo name="warning" size={30} color="red"/>
                    <Text size="lg" position="center"> {Props.information} </Text>
                </View>
            </View>
        </View>
    );
});