import { MaterialIcons } from "@expo/vector-icons";
import React from "react";
import { View } from "react-native";
import Text, { ExtendedTextProps } from "../ui/Text";

interface Props extends ExtendedTextProps {
  isVisible: boolean;
}

export default React.forwardRef<any, Props>(
  ({ isVisible, ...props }, ref): React.ReactElement => {
    const buildClassName = (): string => {
      return (
        "flex-row items-center gap-2 bg-red-300 p-4 border-2 border-red-500 rounded-3xl" +
        " " +
        (isVisible ? "block" : "hidden")
      );
    };

    return (
      <View className={buildClassName()} {...ref}>
        <MaterialIcons name="error" size={24} color={"red"} />
        <Text position="center" weight="bold" {...props} />
      </View>
    );
  }
);