import React from 'react';
import PropTypes from 'prop-types';
import { classNames } from '@gigmedia/enigma-utils';
import useTranslate from '~hooks/useTranslate/useTranslate';
import googlePreferredSourceCta from '../../../images/google-preferred-source.png';
import styles from './google-preferred-source.module.scss';

const GooglePreferredSource = ({ extraClass, style }) => {
  const href = process.env.GATSBY_GOOGLE_PREFERRED_SOURCE_URL;
  const defaultMessage = useTranslate(
    'google_preferred_source_message',
    'Enjoying Covers content?'
  );
  const messagePartTwo = useTranslate(
    'google_preferred_source_message_part_two',
    'Add us as a preferred source on your Google account'
  );
  const ctaAlt = useTranslate(
    'google_preferred_source_button',
    'Add as a preferred source on Google'
  );

  if (!href) {
    return null;
  }

  return (
    <div className={classNames([styles.container, extraClass])} style={style}>
      <p className={styles.message}>
        <span className={styles.messageBold}>{defaultMessage}</span>{' '}
        <span className={styles.messagePartTwo}>{messagePartTwo}</span>
      </p>
      <a
        className={styles.cta}
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={ctaAlt}
      >
        <img
          className={styles.ctaImage}
          src={googlePreferredSourceCta}
          alt={ctaAlt}
          width={152}
          height={48}
          loading="lazy"
        />
      </a>
    </div>
  );
};

GooglePreferredSource.propTypes = {
  extraClass: PropTypes.string,
  style: PropTypes.shape({}),
};

export default GooglePreferredSource;
