/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube';
import PropTypes from 'prop-types';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { translate } from '~helpers/getters';
import styles from './social-icons.module.scss';

const SocialIcons = ({
  socialIcons,
  showTitle = true,
  icons = {
    instagram: <FaInstagram title="Instagram Icon" />,
    facebook: <FaFacebookSquare title="Facebook Icon" />,
    twitter: (
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 13 12"
        fill="currentcolor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
      </svg>
    ),
    linkedin: <FaLinkedin title="Linkedin Icon" />,
    youtube: <FaYoutube title="Youtube Icon" />,
  },
}) => {
  const { translations } = useContext(Context) || {};
  const keys = socialIcons ? Object.keys(socialIcons) : [];

  return (
    <div className={styles?.container || ''}>
      {showTitle && (
        <div className={styles?.title || ''}>
          {translate(translations, 'follow_us', 'Follow us on our socials:')}
        </div>
      )}
      <div className={styles?.socialIcons || ''}>
        {keys.map(
          (key) =>
            socialIcons[key] && (
              <a
                key={keygen()}
                aria-label={`${key} Link`}
                href={socialIcons[key]}
                target="_blank"
                rel="noreferrer"
              >
                {icons[key]}
              </a>
            )
        )}
      </div>
    </div>
  );
};

export default SocialIcons;

SocialIcons.propTypes = {
  socialIcons: PropTypes.shape({}),
  showTitle: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  icons: PropTypes.object,
};
