import * as React from 'react';
import { getIcon } from 'utils/getIcon';
import { useTranslation } from 'utils/i18n';

import { RainbowBar } from '@nova-hf/ui';

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

interface INovaTvProfileBoxHeaderProps {
  iconName?: string;
  link?: string;
  onClick?: () => void;
  menuLinks?: any;
}

export const NovaTvProfileBoxHeader = ({
  iconName = 'NovaTV_white',
  link = 'https://novatv.is',
  onClick = () => {
    return;
  },
}: // menuLinks
INovaTvProfileBoxHeaderProps) => {
  const { t } = useTranslation('subscriptions');

  return (
    <button className={s.header} onClick={onClick}>
      <div className={s.content}>
        <div className={s.firstRow}>
          {getIcon(iconName)}
          {/* <EditMenu /> */}
        </div>
        <div className={s.secondRow}>
          <a
            className={s.link}
            href={link}
            target="_blank"
            onClick={(e) => e.stopPropagation()}
            rel="noreferrer"
          >
            <span className={s.icon}>{getIcon('arrow-right')}</span>
            <span>{t('novaTv.watchInBrowser')}</span>
          </a>
        </div>
      </div>
      <RainbowBar weight="thin" percentage={100} color="black100" position="relative" />
    </button>
  );
};