import React from "react";
import { HStack, Pressable, Text, VStack } from "native-base";
import type { AccessibilityProps } from "react-native";

export interface TransactionCardProps {
  icon?: React.ReactNode;
  leftTitle?: string;
  leftSubtitle?: string;
  leftLowertitle?: string;
  rightTitle?: string;
  rightSubtitleComponent?: React.ReactNode;
  rightLowertitle?: string;
  onPress: () => void;
}

export const TransactionCard: React.FC<
  TransactionCardProps & AccessibilityProps
> = (props) => {
  const {
    onPress,
    leftTitle,
    leftSubtitle,
    leftLowertitle,
    rightTitle,
    rightSubtitleComponent,
    rightLowertitle,
    ...rest
  } = props;
  return (
    <Pressable
      maxWidth="500"
      p="4"
      bg="white"
      rounded="2xl"
      borderWidth={1}
      borderColor="neutral.BorderAndDisabled"
      onPress={onPress}
      {...rest}
    >
      <HStack justifyContent="space-between">
        <HStack space="2">
          {props.icon}
          <VStack maxW="150" space="1">
            <Text numberOfLines={1} fontWeight="bold">
              {leftTitle}
            </Text>
            <Text color="neutral.SecondaryText" numberOfLines={1}>
              {leftSubtitle}
            </Text>
            <Text color="neutral.SecondaryText" numberOfLines={1}>
              {leftLowertitle}
            </Text>
          </VStack>
        </HStack>
        <VStack maxW="110" space="1" alignItems="flex-end">
          <Text numberOfLines={1} fontWeight="bold">
            {rightTitle}
          </Text>
          {rightSubtitleComponent}
          <Text
            numberOfLines={1}
            color="neutral.SecondaryText"
            fontSize="xs"
            textAlign="right"
            fontStyle="italic"
            pt="0.5"
          >
            {rightLowertitle}
          </Text>
        </VStack>
      </HStack>
    </Pressable>
  );
};

export default TransactionCard;