import { useContext } from "react";
import { Text, View } from "react-native";
import { AppContext, AppStyles } from "../../utils";

export default function Card({ children, cardTopicText, cardBackgroundColor }) {
  const appContext = useContext(AppContext);

  const backgroundColor =
    cardBackgroundColor === undefined
      ? appContext.appTheme.card.backgroundColor
      : cardBackgroundColor;

  return (
    <>
      <View
        style={{
          paddingTop: 10,
          paddingLeft: 10,
          paddingRight: 10,
          paddingBottom: 10,
        }}
      >
        {cardTopicText !== undefined && (
          <Text
            style={{
              paddingLeft: 10,
              color: appContext.appTheme.colors.gray,
              paddingBottom: 6,
            }}
          >
            {cardTopicText}
          </Text>
        )}
        <View
          style={[
            {
              borderRadius: 20,
              backgroundColor: backgroundColor,
              padding: 20,
            },
            AppStyles.Shadow,
          ]}
        >
          {children}
        </View>
      </View>
    </>
  );
}
