import React from 'react';
import PropTypes from 'prop-types';

import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl } from '~helpers/getters';
import OperatorCta from '~atoms/button/operator-cta';
import styles from './operator.module.scss';

const Operator = ({ item = {} }) => {
  const { relation } = item;
  const img = relation?.standardised_logo_url_object?.filename || relation.logo_url;

  return (
    <div className={styles.row || ''}>
      <LazyImage width={56} height={56} src={imagePrettyUrl(img, 56, 56)} alt={item.title} />
      <h3>{item.title}</h3>
      <OperatorCta module="search" operator={relation} gtmClass="toplist-operator-cta-gtm" />
    </div>
  );
};

Operator.propTypes = {
  item: PropTypes.shape({
    title: PropTypes.string,
    relation: PropTypes.shape({
      logo_url: PropTypes.string,
    }),
  }).isRequired,
};

export default Operator;
