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

import SVGArrow from 'assets/svg/arrow.svg';

import s from './NovaTvProfileBoxItem.module.scss';
import { Subscription } from 'typings/graphql';

interface INovaTvProfileBoxProps {
  subscription: Subscription;
  onClick?: () => void;
}

export const NovaTvProfileBoxItem = ({ subscription, onClick }: INovaTvProfileBoxProps) => {
  return (
    <button className={s.novaTvProfileBoxItem} onClick={onClick}>
      <div className={s.titleContainer}>
        <div className={s.title}>{subscription.plan.product.title}</div>
        {subscription?.nextChargeAmount && (
          <div className={s.subtitle}>{`${formatPrice(subscription?.nextChargeAmount, {
            showZero: true,
            monthly: true,
          })}`}</div>
        )}
      </div>
      <div className={s.arrowContainer}>
        <SVGArrow />
      </div>
    </button>
  );
};