import * as React from 'react';
import { formatPrice, formatDate } from 'utils/helpers';

import { IRefillHistoryItem } from 'typings';

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

const cn = classNames.bind(s);

interface IRefillListItemProps {
  children?: React.ReactNode;
  color: string;
  item: IRefillHistoryItem;
}

export const RefillListItem = ({
  color,
  item: { title, amount, description, date, success, message },
}: IRefillListItemProps) => (
  <div className={cn(s.refillListItem, { failed: !success })}>
    <div className={cn(s.refillListItem__value, 'title', `color-${color}`)}>
      <span className={s.refillListItem__date}>{`${formatDate(date, 'dd.MM.yyyy')}`}</span>
      <span className={s.refillListItem__time}>{`kl. ${formatDate(date, 'HH:mm')}`}</span>
    </div>
    <div className={s.refillListItem__refill}>
      <div className={cn(s.refillListItem__value, 'refill')}>{description}</div>
      <div className={cn(s.refillListItem__value, 'type')}>{title}</div>
    </div>

    <div className={cn(s.refillListItem__value, 'total')}>
      {formatPrice(amount)}
      {!success && <div className={s.refillListItem__message}>{message}</div>}
    </div>
  </div>
);