import { ScrollView, View } from 'react-native';
import { Avatar, Card, ListItem, Text } from '@cdx-ui/components';
import { transactions } from './data';

export function ActivityCard() {
  return (
    <Card>
      <Card.Content className="p-0">
        <ListItem.SectionHeader>Recent activity</ListItem.SectionHeader>
        <View className="h-[200px]">
          <ScrollView>
            {transactions.map((item, index) => (
              <ListItem
                key={item.id}
                onPress={() => {}}
                showSeparator={index < transactions.length - 1}
              >
                <ListItem.LeadingSlot>
                  <Avatar size="md">
                    <Avatar.Text>{item.initials}</Avatar.Text>
                  </Avatar>
                </ListItem.LeadingSlot>
                <ListItem.Content>
                  <ListItem.Title>{item.merchant}</ListItem.Title>
                  <ListItem.Description>{item.meta}</ListItem.Description>
                </ListItem.Content>
                <ListItem.TrailingSlot>
                  <Text
                    className={
                      item.incoming
                        ? 'body-md font-semibold text-content-success'
                        : 'body-md font-semibold text-content-primary'
                    }
                  >
                    {item.amount}
                  </Text>
                </ListItem.TrailingSlot>
              </ListItem>
            ))}
          </ScrollView>
        </View>
      </Card.Content>
    </Card>
  );
}