import * as React from 'react';
import Edit from 'assets/svg/edit.svg';
import classNames from 'classnames/bind';
import Checkbox from 'components/checkbox/Checkbox';

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

const cn = classNames.bind(s);

interface IProfileListItemLoading {
  children?: React.ReactNode;
  color?: string;
  noSelection?: boolean;
  noEdit?: boolean;
}

export const ProfileListItemLoading = ({
  children,
  color,
  noSelection = false,
  noEdit,
}: IProfileListItemLoading) => (
  <div className={s.profileListItem}>
    {!noSelection && (
      <div className={s.profileListItem__checkbox}>
        <Checkbox radio color={color} name="loading" />
      </div>
    )}
    <div className={cn(s.profileListItem__profile, { noSelection, noEdit })}>
      <div className={s.profileListItem__subscription}>
        <div className={s.profileListItem__subscriptionWrapper}>
          <div className={cn(s.profileListItem__title, `color-${color}`, 'profile')} />
          <div className={cn(s.profileListItem__subtitle, 'profile')} />
        </div>
      </div>
      <div className={s.profileListItem__usagePacks}>
        <div className={s.profileListItem__usagePack}>
          <div className={cn(s.profileListItem__title, `color-${color}`, 'usagePack')} />
          <div className={cn(s.profileListItem__subtitle, 'usagePack')} />
        </div>
      </div>
      {children && <div className={s.profileListItem__usageListItems}>{children}</div>}
      <div className={s.profileListItem__total}>
        <div className={s.profileListItem__totalWrapper}>
          <div className={cn(s.profileListItem__title, `color-${color}`, 'total')} />
          <div className={cn(s.profileListItem__subtitle, 'total')} />
        </div>
      </div>
    </div>

    {!noEdit && (
      <div className={s.profileListItem__edit}>
        <Edit />
      </div>
    )}
  </div>
);