import * as React from 'react';

import RightArrowSvg from 'assets/svg/arrow.svg';

import s from './UsageBoxItem.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface IUsageBoxItemLoadingProps {
  color?: string;
}

export const UsageBoxItemLoading = ({ color }: IUsageBoxItemLoadingProps) => {
  return (
    <div className={cn(s.usageBoxItem, 'loading')}>
      <div className={s.usageBoxItem__usagePackTitle} />

      <div className={s.usageBoxItem__clickableArrow}>
        <RightArrowSvg className={cn(s.usageBoxItem__clickableArrowSvg, 'color-grey')} />
      </div>
      <div className={s.usageBoxItem__content}>
        <div className={s.usageBoxItem__contentMain} />

        <div className={s.usageBoxItem__contentPrice} />
      </div>
    </div>
  );
};