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

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

const cn = classNames.bind(s);

export const SummaryListItemLoading = () => {
  return (
    <div className={s.summaryListItemLoading}>
      <div className={cn(s.summaryListItemLoading__line, 'level1')}>
        <div className={s.summaryListItemLoading__label}>
          <div className={s.summaryListItemLoading__text} />
        </div>
        <div className={s.summaryListItemLoading__amount}>
          <div className={s.summaryListItemLoading__text} />
        </div>
      </div>
      <div className={cn(s.summaryListItemLoading__line, 'level2')}>
        <div className={s.summaryListItemLoading__label}>
          <div className={s.summaryListItemLoading__text} />
        </div>
        <div className={s.summaryListItemLoading__count}>
          <div className={s.summaryListItemLoading__text} />
        </div>
        <div className={s.summaryListItemLoading__amount}>
          <div className={s.summaryListItemLoading__text} />
        </div>
      </div>
      <div className={cn(s.summaryListItemLoading__line, 'level3')}>
        <div className={s.summaryListItemLoading__label}>
          <div className={s.summaryListItemLoading__text} />
        </div>
        <div className={s.summaryListItemLoading__amount}>
          <div className={s.summaryListItemLoading__text} />
        </div>
      </div>
    </div>
  );
};