import * as React from 'react';
import classNames from 'classnames/bind';

import Edit from 'assets/svg/edit.svg';

import { IInvoice } from 'typings';

import { formatPrice, formatDate, capitalize } from 'utils/helpers';

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

const cn = classNames.bind(s);

interface IInvoiceListItemProps {
  color?: string;
  invoice: IInvoice;
}

export const InvoiceListItem = ({
  color,
  invoice: { amount, date, isOpen },
}: IInvoiceListItemProps) => {
  return (
    <div className={s.invoiceListItem}>
      <div className={s.invoiceListItem__invoice}>
        <div className={cn(s.invoiceListItem__title, `color-${color}`)}>
          {capitalize(formatDate(date, 'MMMM yyyy'))}
        </div>
        <div className={s.invoiceListItem__status}>{!isOpen ? 'Greitt' : 'Ógreitt'}</div>
        <div className={s.invoiceListItem__amount}>{formatPrice(amount)}</div>
      </div>
      <div className={s.invoiceListItem__edit}>
        <Edit />
      </div>
    </div>
  );
};