text: import React from "react"
  import {
    FaFacebookSquare,
    FaLinkedin,
    FaGithubSquare,
    FaInstagramSquare,
    FaTwitterSquare,
  } from "react-icons/fa"
  
  const data = [
    {
      id: 1,
      icon: <FaFacebookSquare className="social-icon"></FaFacebookSquare>,
      url: "https://www.facebook.com/ahmed.alanany.58",
    },
    {
      id: 2,
      icon: <FaLinkedin className="social-icon"></FaLinkedin>,
      url: "https://www.linkedin.com/in/ahmed-anany-b30145175",
    },
    {
      id: 3,
      icon: <FaGithubSquare className="social-icon"></FaGithubSquare>,
      url: "https://github.com/ahmedElanany",
    },
    {
      id: 4,
      icon: <FaInstagramSquare className="social-icon"></FaInstagramSquare>,
      url: "https://instagram.com/a7madal3nany",
    },
    {
      id: 5,
      icon: <FaTwitterSquare className="social-icon"></FaTwitterSquare>,
      url: "https://twitter.com/Ahmed82065042",
    },
  ]
  const links = data.map(link => {
    return (
      <li key={link.id}>
        <a href={link.url} target="_blank" className="social-link">
          {link.icon}
        </a>
      </li>
    )
  })
  
  export default ({ styleClass }) => {
    return (
      <ul className={`social-links ${styleClass ? styleClass : ""}`}>{links}</ul>
    )
  }
  