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

export default function Card({ children, 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,
      }}
    >
      <View
        style={[
          {
            borderRadius: 20,
            backgroundColor: backgroundColor,
            padding: 20,
          },
          AppStyles.Shadow,
        ]}
      >
        {children}
      </View>
    </View>
  );
}
