import { Avatar, Card, Chip, ListItem } from '@cdx-ui/components';
import { CreditCard } from '@cdx-ui/icons';

export function RewardsCard() {
  return (
    <Card>
      <Card.Content className="p-0">
        <ListItem onPress={() => {}} showSeparator={false}>
          <ListItem.LeadingSlot>
            <Avatar size="md">
              <Avatar.Icon as={CreditCard} />
            </Avatar>
          </ListItem.LeadingSlot>
          <ListItem.Content>
            <ListItem.Title>Travel Rewards ···· 1430</ListItem.Title>
            <ListItem.Description>$24,567.89 available</ListItem.Description>
            <ListItem.Meta>Statement closes in 6 days</ListItem.Meta>
          </ListItem.Content>
          <ListItem.TrailingSlot>
            <Chip variant="subtle" color="warning">
              <Chip.Label>Due soon</Chip.Label>
            </Chip>
          </ListItem.TrailingSlot>
        </ListItem>
      </Card.Content>
    </Card>
  );
}