import * as React from 'react';

import classNames from 'classnames/bind';

import Checkbox from 'components/checkbox/Checkbox';

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

const cn = classNames.bind(s);

interface ITransactionListItemLoadingProps {
  color: string;
}

export const TransactionListItemLoading = ({ color }: ITransactionListItemLoadingProps) => {
  return (
    <div className={s.transactionListItem}>
      <div className={s.transactionListItem__checkbox}>
        <Checkbox radio color={color} name="loading" />
      </div>
      <div className={s.transactionListItem__transaction}>
        <div className={cn(s.transactionListItem__col, 'title')}>
          <span className={s.transactionListItem__label}>Dagsetning:</span>
          <span className={cn(s.transactionListItem__value, `color-${color}`, 'clickable')} />
        </div>
        <div className={cn(s.transactionListItem__col, 'SVG')}>
          <span className={s.transactionListItem__label}>PDF:</span>
          <span className={s.transactionListItem__value} />
        </div>
        <div className={cn(s.transactionListItem__col, 'status')}>
          <span className={s.transactionListItem__label}>Tegund fylgiskjals:</span>
          <span className={s.transactionListItem__value} />
        </div>
        <div className={cn(s.transactionListItem__col, 'status')}>
          <span className={s.transactionListItem__label}>Númer fylgiskjals:</span>
          <span className={s.transactionListItem__value} />
        </div>
        <div className={cn(s.transactionListItem__col, 'status')}>
          <span className={s.transactionListItem__label}>Lýsing:</span>
          <span className={s.transactionListItem__value} />
        </div>
        <div className={cn(s.transactionListItem__col, 'amount', 'total')}>
          <span className={s.transactionListItem__label}>Upphæð:</span>
          <span className={s.transactionListItem__value} />
        </div>
        <div className={cn(s.transactionListItem__col, 'amount')}>
          <span className={s.transactionListItem__label}>Eftirstöðvar:</span>
          <span className={s.transactionListItem__value} />
        </div>
        <div className={cn(s.transactionListItem__col, 'amount')}>
          <span className={s.transactionListItem__label}>Staða(SGM):</span>
          <span className={s.transactionListItem__value} />
        </div>
      </div>
    </div>
  );
};