import React, { ReactNode } from 'react';
import { useTheme } from '../../theme/ThemeProvider';
import { Box } from '../Box';
import { CardContainer } from '../CardContainer';
import { Text } from '../Text';
import { TouchableComponent } from '../TouchableComponent';

interface CardProps {
  headerText?: string;
  mainText?: string;
  footerText?: string;
  rightComponent?: ReactNode;
  withCardContainer?: boolean;
}

export const CardAlternativeItem = ({
  headerText,
  mainText,
  footerText,
  rightComponent,
  withCardContainer = true,
  bg,
  backgroundColor = 'white',
  onPress,
  ...props
}: React.ComponentProps<typeof TouchableComponent> & CardProps) => {
  const { fonts } = useTheme();

  const CardAlternativeItemComponent = (
    cardProps: React.ComponentProps<typeof TouchableComponent>
  ) => {
    return (
      <TouchableComponent
        flexDirection={'row'}
        alignItems={'center'}
        {...cardProps}
        {...{ bg, backgroundColor, onPress }}
      >
        <Box flex={1}>
          {headerText && (
            <Text variant="SubTitle" fontFamily={fonts.caustenRoundBold}>
              {headerText}
            </Text>
          )}
          {mainText && (
            <Text variant="H1" fontFamily={fonts.caustenRoundBold}>
              {mainText}
            </Text>
          )}
          {footerText && (
            <Text variant="SubHead" fontFamily={fonts.caustenRoundRegular}>
              {footerText}
            </Text>
          )}
        </Box>
        {rightComponent && (
          <Box marginLeft={'spacing-xs'}>{rightComponent}</Box>
        )}
      </TouchableComponent>
    );
  };

  if (withCardContainer)
    return (
      <CardContainer {...props} {...{ bg, backgroundColor, onPress }}>
        <CardAlternativeItemComponent />
      </CardContainer>
    );
  return <CardAlternativeItemComponent {...props} />;
};