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

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>
  );
});