import { Chip, HStack } from '@cdx-ui/components';
import { CalendarMonth, Check, ErrorIcon } from '@cdx-ui/icons';

export function BillStatusChips() {
  return (
    <HStack className="gap-2 flex-wrap items-center">
      <Chip variant="subtle" color="success">
        <Chip.Icon as={Check} />
        <Chip.Label>Paid</Chip.Label>
      </Chip>
      <Chip variant="subtle" color="warning">
        <Chip.Icon as={CalendarMonth} />
        <Chip.Label>Payment due</Chip.Label>
      </Chip>
      <Chip variant="subtle" color="danger">
        <Chip.Icon as={ErrorIcon} />
        <Chip.Label>Overdue</Chip.Label>
      </Chip>
    </HStack>
  );
}