import React, {ReactNode} from 'react';
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {CustomPressable} from '../Button';
import {Colors, fontSz, globalStyles, hp, ms} from '../../utils';
import {Text} from '../Text';

export const HomeNavigationCard = ({
  title, // the title of the card
  backgroundColor, // the background color of the card
  onPress, // called when the card is pressed
  topComponent, //
  icon, // the icon of the card
  containerStyle, // additional styles for the card container
}: {
  title: string;
  backgroundColor: string;
  onPress?: () => void;
  topComponent: ReactNode;
  icon: ReactNode;
  containerStyle?: StyleProp<ViewStyle>;
}) => {
  return (
    <CustomPressable
      onPress={onPress}
      style={[
        globalStyles.colBetween,
        styles.navigationCardContainer,
        {
          backgroundColor: backgroundColor,
        },
        containerStyle,
      ]}
      activeOpacity={onPress ? 0.9 : 1}>
      {topComponent ?? topComponent}
      <View style={[globalStyles.colCenter, {rowGap: ms(7.5)}]}>
        {icon ?? icon}
        <Text
          color={Colors.chooseAccountTypeText} //
          fontWeight="500"
          fontFamily={'Gordita-Medium'}
          fontSize={fontSz(12)}
          text={title ?? ''}
        />
      </View>
    </CustomPressable>
  );
};

const styles = StyleSheet.create({
  navigationCardContainer: {
    alignItems: 'center',
    width: '31.5%',
    minHeight: ms(105),
    borderRadius: ms(4),
    marginVertical: hp(6),
    marginBottom: hp(12),
    paddingVertical: ms(10),
    paddingBottom: ms(20),
  },
});