import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { useTranslation } from 'react-i18next';

import { FinancialType } from '../utils/MoneyUtils';

export default function ReacordCom({ info }) {
  const { t } = useTranslation();
  const { name, amount, avatar, num, type, time } = info;
  const typeInfo = FinancialType.get(type);

  return (
    <Div
      bg="white"
      row
      alignItems="center"
      py={10}
      borderColor="gray100"
      borderBottomWidth={1}
    >
      {avatar ? (
        <Image w={33} h={33} rounded="circle" source={{ uri: avatar }} />
      ) : (
        <Icon
          w={33}
          h={33}
          name="creditcard"
          bg="yellow500"
          color="white"
          rounded="circle"
        />
      )}

      <Div flex={1} ml={5}>
        <Div row>
          <Text flex={1}>{name}</Text>
          <Text>
            {typeInfo.backMoney ? typeInfo.backMoney(amount) : amount}
          </Text>
        </Div>
        <Text>{time}</Text>
        <Text>{t(typeInfo.name)}</Text>
      </Div>
    </Div>
  );
}