import { Avatar, Card, Heading, ListItem, Text } from '@cdx-ui/components';
import { accounts } from './data';

export function AccountsCard() {
  return (
    <Card>
      <Card.Header>
        <Heading size="sm">Accounts</Heading>
      </Card.Header>
      <Card.Content className="p-0">
        {accounts.map((account, index) => (
          <ListItem key={account.id} onPress={() => {}} showSeparator={index < accounts.length - 1}>
            <ListItem.LeadingSlot>
              <Avatar size="md">
                <Avatar.Icon as={account.icon} />
              </Avatar>
            </ListItem.LeadingSlot>
            <ListItem.Content>
              <ListItem.Title>{account.title}</ListItem.Title>
              <ListItem.Description>{account.last}</ListItem.Description>
            </ListItem.Content>
            <ListItem.TrailingSlot>
              <Text className="body-md font-semibold text-content-primary">{account.amount}</Text>
            </ListItem.TrailingSlot>
          </ListItem>
        ))}
      </Card.Content>
    </Card>
  );
}