import { useState } from 'react';

import { Box, Heading } from 'components/common';

import { InvoiceItem } from 'components/billing/InvoiceItem';

export const Invoices = ({
  data = [],
}: {
  data: {
    id: string;
    status: string;
    number: string;
    pdfUrl: string;
    created: string;
  }[];
}) => {
  const [hidden, setHidden] = useState(true);
  return (
    <Box spacingY={4} className="fz14">
      <Heading>Invoices</Heading>
      <Box spacingY={2}>
        {data?.length ? (
          data.slice(0, hidden ? 10 : undefined).map((invoice) => {
            return (
              <InvoiceItem
                invoiceId={invoice.id}
                status={invoice.status}
                number={invoice.number}
                pdfUrl={invoice.pdfUrl}
                created={invoice.created}
                key={invoice.id}
              />
            );
          })
        ) : (
          <div>No invoices found</div>
        )}
      </Box>
      {data?.length > 10 && (
        <div className="link cup" onClick={() => setHidden((s) => !s)}>
          {hidden ? 'Show more' : 'Show less'}
        </div>
      )}
    </Box>
  );
};