import React from 'react';
import PropTypes from 'prop-types';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import useTranslate from '~hooks/useTranslate/useTranslate';

import styles from './site-contacts.module.scss';

const SiteContacts = ({ page, showHeading = false, heading = null }) => {
  const { siteSchema } = page || {};
  const email = siteSchema?.email || null;

  if (!email) return;

  return (
    <div className={styles.siteContactsContainer}>
      {showHeading && (
        <h2>{heading || useTranslate('reach_us', 'Reach out to one of our departments')}</h2>
      )}
      <div className={styles.siteContacts}>
        <ul className={styles?.generalContacts || ''}>
          {email?.map((item) => (
            <li key={keygen()}>
              <p>{item.contact_type}</p>
              <a href={`mailto:${item.email}`}>{item.email}</a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default SiteContacts;

SiteContacts.propTypes = {
  page: PropTypes.shape({
    siteSchema: PropTypes.shape({}),
  }).isRequired,
  showHeading: PropTypes.bool,
  heading: PropTypes.string,
};
