import * as React from 'react';
import { isEmpty } from 'lodash';
import { EmptyMessage } from '@nova-hf/ui';
import classNames from 'classnames/bind';

import s from './InvoiceList.module.scss';

const cn = classNames.bind(s);

interface IInvoiceListProps {
  children: React.ReactNode;
  color?: string;
  view?: string;
}

export const InvoiceList = ({ children, view }: IInvoiceListProps) => {
  const viewList = view === 'list';

  return (
    <div className={s.invoiceList}>
      <h2 className={cn(s.invoiceList__title, { viewBox: !viewList })}>Reikningar</h2>
      {viewList && (
        <div className={s.invoiceList__header}>
          <div className={s.invoiceList__titles}>
            <div className={s.invoiceList__month}>Mánuður</div>
            <div className={s.invoiceList__status}>Staða</div>
            <div className={s.invoiceList__amount}>Samtals</div>
          </div>
        </div>
      )}
      <div className={cn(s.invoiceList__items, { viewBox: !viewList, empty: !children })}>
        {isEmpty(children) ? (
          <EmptyMessage
            title="Engir reikningar"
            description="Engir reikningar til fyrir þetta númer."
          />
        ) : (
          children
        )}
      </div>
    </div>
  );
};