import * as React from 'react';
import { UsageBoxItemLoading } from 'components/usage/UsageBoxItemLoading';

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

const cn = classNames.bind(s);
interface IProfileBoxItemLoadingProps {
  color: string;
  inGrid: boolean;
}

export const ProfileBoxItemLoading = ({ color, inGrid }: IProfileBoxItemLoadingProps) => {
  return (
    <div className={cn(s.profileBoxItem, { inGrid }, 'loading')}>
      <div className={s.profileBoxItem__container}>
        <div className={s.profileBoxItem__shadow}>
          <div className={s.profileBoxItem__wrapper}>
            <div className={s.profileBoxItem__top}>
              <div className={cn(s.profileBoxItem__head, 'color-grey400')}>
                <div className={s.profileBoxItem__title} />
                <div className={s.profileBoxItem__info}>
                  <div className={s.profileBoxItem__rateplan} />
                </div>
              </div>
              <UsageBoxItemLoading color={color} />
              <UsageBoxItemLoading color={color} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};