import {StyleSheet, View, ViewStyle} from 'react-native';
import React, {FC, ReactNode} from 'react';
import {useTheme, ColorsScheme} from '../../theme/ThemeContext';
import {SPACING_16, SPACING_8} from '../Spacing/Spacing';
interface CardViewProps {
  children: ReactNode;
  cardViewStyle?: ViewStyle;
}
const CardView: FC<CardViewProps> = ({children, cardViewStyle}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors || {});
  return <View style={[styles.container, cardViewStyle]}>{children}</View>;
};

export default CardView;

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    container: {
      borderRadius: SPACING_16,
      borderColor: colors.separator_non_opaque,
      backgroundColor: colors.background_grouped_secondary,
    },
  });