import * as React from 'react';

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

const cn = classNames.bind(s);

interface IUsageListItemProps {
  color: string;
  key: string;
  title: string;
  subTitle: string;
}

export const UsageListItem = ({ color, key, title, subTitle }: IUsageListItemProps) => {
  return (
    <div className={s.usageListItem__usagePack} key={key}>
      <div className={cn(s.usageListItem__usagePackTitle, `color-${color}`)}>{title}</div>
      <div className={s.usageListItem__usagePackSubtitle}>{subTitle}</div>
    </div>
  );
};