import React from 'react';
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 { FaWikipediaW } from '@react-icons/all-files/fa/FaWikipediaW';
import { FaRegEnvelope } from '@react-icons/all-files/fa/FaRegEnvelope';

export const TwitterIcon = () => (
  <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>
);

const socialIcons = {
  facebook: <FaFacebookSquare title="Facebook Icon" />,
  instagram: <FaInstagram title="Instagram Icon" />,
  linkedin: <FaLinkedin title="Linkedin Icon" />,
  twitter: <TwitterIcon />,
  tiktok: <IoLogoTiktok title="Tiktok Icon" />,
  wikipedia: <FaWikipediaW title="Wikipedia" />,
  message: <FaRegEnvelope title="Envelope icon" />,
};

export default (author) => [
  { 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 },
  { id: 'em', link: author?.email_address, icon: socialIcons?.message },
];
