import React from 'react';
import { StyleSheet, type StyleProp, View, type ViewStyle } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import { defaultScale } from '../../utils/Common';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';

type Props = React.ComponentPropsWithRef<any> & {
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  theme: Theme;
};

const CardContent = ({ style, ...rest }: Props): any => {
  const { colors } = useTheme();
  const stylesWithProp = styles({ colors });

  return <View {...rest} style={[stylesWithProp.container, style]} />;
};

CardContent.displayName = 'Card.Content';

const styles = (props: { colors: any }) =>
  StyleSheet.create({
    container: {
      paddingHorizontal: moderateScale(16, defaultScale),
      paddingTop: moderateScale(8, defaultScale),
      paddingBottom: moderateScale(16, defaultScale),
      backgroundColor: props.colors.background,
    },
  });

export default withTheme(CardContent);