/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
import { SiWikipedia } from '@react-icons/all-files/si/SiWikipedia';
import styles from './socials.module.scss';

export default function Socials({
  className = '',
  author,
  socialIcons = {
    facebook: <FaFacebookSquare title="Facebook Icon" />,
    instagram: <FaInstagram title="Instagram Icon" />,
    linkedin: <FaLinkedin title="Linkedin 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>
    ),
    tiktok: <IoLogoTiktok title="Tiktok Icon" />,
    wikipedia: <SiWikipedia title="Wikipedia Icon" />,
  },
}) {
  const socialLinks = [
    { id: 'fb', link: author.facebook_profile, icon: socialIcons.facebook },
    { id: 'ig', link: author.instagram_profile, icon: socialIcons.instagram },
    { id: 'li', link: author.linkedin_profile, icon: socialIcons.linkedin },
    { id: 'tw', link: author.twitter_profile, icon: socialIcons.twitter },
    { id: 'tt', link: author.tik_tok, icon: socialIcons.tiktok },
    { id: 'wk', link: author?.personal_website, icon: socialIcons?.wikipedia },
  ].filter((socialLink) => socialLink.link);

  return (
    socialLinks.length > 0 && (
      <div className={`${className || ''} ${styles.socials || ''}`}>
        {socialLinks.map((socialLink) => (
          // eslint-disable-next-line jsx-a11y/control-has-associated-label
          <a
            className={`${styles.social || ''} author-gtm`}
            href={socialLink.link}
            target="_blank"
            rel="nofollow noreferrer"
            key={`author-box-link-${socialLink.id}`}
            aria-label={`${socialLink.id} Link`}
          >
            {socialLink.icon}
          </a>
        ))}
      </div>
    )
  );
}

Socials.propTypes = {
  className: PropTypes.string,
  author: PropTypes.shape({
    facebook_profile: PropTypes.string,
    instagram_profile: PropTypes.string,
    linkedin_profile: PropTypes.string,
    twitter_profile: PropTypes.string,
    tik_tok: PropTypes.string,
    personal_website: PropTypes.string,
  }),
  socialIcons: PropTypes.shape({}),
};
