/* eslint-disable import/no-extraneous-dependencies */
import React 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 useTranslate from '~hooks/useTranslate/useTranslate';
import TwitterIcon from '~images/icons/twitter';

import styles from './social-icons.module.scss';

const SocialIcons = ({
  socialIcons,
  showTitle = true,
  icons = {
    instagram: <FaInstagram title="Instagram Icon" />,
    facebook: <FaFacebookSquare title="Facebook Icon" />,
    twitter: <TwitterIcon />,
    linkedin: <FaLinkedin title="Linkedin Icon" />,
    youtube: <FaYoutube title="Youtube Icon" />,
  },
}) => {
  const keys = socialIcons ? Object.keys(socialIcons) : [];

  return (
    <div className={styles?.container || ''}>
      {showTitle && (
        <div className={styles?.title || ''}>{useTranslate('follow_us', 'Follow Us')}</div>
      )}
      <div className={styles?.socialIcons || ''}>
        {keys.map(
          (key) =>
            socialIcons[key] && (
              <a
                key={keygen()}
                aria-label={useTranslate(`ariaLabel-${key}Link`, `${key} Link`)}
                href={socialIcons[key]}
                target="_blank"
                rel="noreferrer noopener"
              >
                {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,
};
