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

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

type CardBackgroundColor = 'red' | 'green' | 'grey' | 'black';

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

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

  const touchableContent = (
    <TouchableOpacity onPress={safeOnPress}>
      {content}
    </TouchableOpacity>
  )

  return (
    onPress ? touchableContent : content
  );
};

const Container = styled.View<{
  bgColor: CardBackgroundColor;
}>(({ theme, bgColor }) => ({
  padding: 30,
  width: '100%',
  borderRadius: 10,
  overflow: 'hidden',
  backgroundColor: theme.colors[bgColor]
}));

export default Card;