boxons/components/shared/Card.tsx

import styled from '@emotion/native';
import React, { useCallback } from 'react';
import { TouchableOpacity } from 'react-native';

export interface CardProps {
  children: React.ReactNode;
  backgroundColor: CardBackgroundColor;
  borderColor: CardBorderColor;
  color: CardColor;
  testID?: string;
  onPress?: () => void;
}

type CardBackgroundColor = 'red' | 'green' | 'grey' | 'black' | 'white' | 'darkGrey';
type CardBorderColor = 'pink' | 'blue' | 'grey' | 'black' | 'white' | 'darkGrey';
type CardColor = 'black' | 'white';

const Card: React.FC<CardProps> = ({
  children,
  backgroundColor = 'red',
  color = 'black',
  borderColor = 'pink',
  testID = undefined,
  onPress
}) => {
  const safeOnPress = useCallback(() => onPress?.(), [onPress]);

  const content = (
    <Container
      color={color}
      bgColor={backgroundColor}
      testID={testID}
      borderColor={borderColor}
    >
      {children}
    </Container>
  );

  const touchableContent = (
    <CustomTouchableOpacity
      onPress={safeOnPress}
      bgColor={backgroundColor}
      color={color}
      borderColor={borderColor}
    >
      {content}
    </CustomTouchableOpacity>
  )

  return (
    onPress ? touchableContent : content
  );
};

const CustomTouchableOpacity = styled(TouchableOpacity)<{
  color: CardColor;
  borderColor: CardBorderColor;
  bgColor: CardBackgroundColor;
}>(({ theme, color, borderColor, bgColor }) => ({
  color: theme.colors.fixed[color],
  borderColor: theme.colors.fixed[borderColor],
  backgroundColor: theme.colors.fixed[bgColor]
}));

const Container = styled.View<{
  bgColor: CardBackgroundColor;
  borderColor: CardBorderColor;
  color: CardColor;
}>(({ theme, bgColor, borderColor, color }) => ({
  padding: 25,
  width: '100%',
  borderRadius: 0,
  overflow: 'hidden',
  backgroundColor: theme.colors.fixed[bgColor],
  borderWidth: 4,
  borderColor: theme.colors.fixed[borderColor],
  color: theme.colors.fixed[color]
}));

export default Card;