import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab, faFacebookF, faInstagram, faLinkedin, faYoutube } from '@fortawesome/free-brands-svg-icons'
import { fas, faPhone,faEnvelope } from '@fortawesome/free-solid-svg-icons'

library.add( fab, fas, faEnvelope,faPhone,faFacebookF,faInstagram, faLinkedin,faYoutube)

import styles from "./social.module.css"

const SocialMedia = (props) => {
  return (
    <>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" className="svg-settings">
          <defs>
            <linearGradient id="radial" gradientTransform="rotate(45)">
              <stop className={styles.radialStop1} offset="0%" color='#2FB9DF'></stop>
              <stop className={styles.radialStop2} offset="100%" color='#A26EEF'></stop>
            </linearGradient>
          </defs>
        </svg>
        <div className={styles.social_container}>
            <ul className={styles.socials}>
                <li><a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/creativediscoverypt/"><FontAwesomeIcon style={{'height':'2.3em'}} icon={faFacebookF} /></a></li>
                <li><a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/creativediscoverypt/"><FontAwesomeIcon style={{'height':'2.3em'}} icon={faInstagram} /></a></li>
                <li><a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/company/creativediscoverypt/"><FontAwesomeIcon style={{'height':'2.3em'}} icon={faLinkedin} /></a></li>
                <li><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/@CreativeDiscovery"><FontAwesomeIcon style={{'height':'2.3em'}} icon={faYoutube} /></a></li>

            </ul>
        </div>

    </>
  );
};

export default SocialMedia;