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 CardActions = (props: Props): any => {
  const justifyContent = 'center';
  const { colors } = useTheme();
  const stylesWithProp = styles({ colors });

  return (
    <View
      {...props}
      style={[stylesWithProp.container, props.style, { justifyContent }]}
    >
      {React.Children.map(props.children, (child) => {
        return React.isValidElement(child);
        // ? React.cloneElement(child, {
        //     compact: child.props.compact !== false,
        //     style: stylesWithProp.button,
        //   })
        // : child;
      })}
    </View>
  );
};

CardActions.displayName = 'Card.Actions';

const styles = (props: { colors: any }) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'flex-end',
      padding: moderateScale(5, defaultScale),
      backgroundColor: props.colors.background,
    },
    button: {
      marginLeft: moderateScale(8, defaultScale),
    },
  });

export default withTheme(CardActions);