/* eslint-disable react/no-danger */
/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-four';
import OperatorCta from '~atoms/button/operator-cta';
import { prettyTracker } from '~helpers/getters';
import styles from './operator-card.module.scss';
import OpratorDetails from '../../../molecules/operator-details';

export default function index({ item, page }) {
  const operator = item.relation;
  const pageTemplate = page?.relation_type;
  const prettyLink = prettyTracker(operator, 'main', false, pageTemplate);

  return (
    <div className={styles.container}>
      <OpratorDetails item={item} />
      <a
        href={prettyLink}
        target="_blank"
        rel="noreferrer"
        className={`toplist-variant-one-gtm bonus-cta ${styles.oneliner}`}
      >
        <Bonus item={operator} tracker="main" />
      </a>
      <OperatorCta
        operator={operator}
        tracker="main"
        gtmClass="toplist-operator-cta-gtm"
        pageTemplate={pageTemplate}
      />
      {operator?.extra_fields?.terms_and_conditions && (
        <span
          className={styles.tnc}
          dangerouslySetInnerHTML={{
            __html: operator?.extra_fields?.terms_and_conditions,
          }}
        />
      )}
    </div>
  );
}
