import React, { FC } from "react";
import { Text, TouchableOpacity } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

type Props = {
  icon: keyof typeof MaterialCommunityIcons.glyphMap;
  backgroundColor: string;
  flex: number;
  onPressButton: () => void;
  children: string;
};

export const UsefulBox: FC<Props> = (props) => {
  const { icon, backgroundColor, flex, onPressButton, children } = props;
  return (
    <TouchableOpacity
      style={{
        flex: flex,
        backgroundColor: backgroundColor,
        padding: 5,
        alignItems: "center",
        margin: 2,
      }}
      onPress={onPressButton}
    >
      <MaterialCommunityIcons name={icon} color="white" size={50} />
      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};