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

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

const cn = classNames.bind(s);

interface IInvoiceBoxItemLoadingProps {
  color?: string;
}

export const InvoiceBoxItemLoading = ({ color }: IInvoiceBoxItemLoadingProps) => {
  return (
    <div className={s.invoiceBoxItem}>
      <div className={s.invoiceBoxItem__container}>
        <div className={s.invoiceBoxItem__shadow}>
          <div className={s.invoiceBoxItem__wrapper}>
            <div className={s.invoiceBoxItem__head}>
              <h3 className={cn(s.invoiceBoxItem__title, `color-${color}`)} />
              <div className={s.invoiceBoxItem__info}>
                <span className={s.invoiceBoxItem__span} />
                <br />
                <span className={s.invoiceBoxItem__span} />
              </div>
            </div>
            <div className={s.invoiceBoxItem__content}>
              <div className={s.invoiceBoxItem__contentText} />
              <div className={s.invoiceBoxItem__contentSubtext} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};