import React from 'react';
import { Link } from '@mui/material';
import { FaFacebook, FaTelegramPlane, FaWhatsapp, FaYoutube, FaLinkedin, FaMapMarkerAlt } from 'react-icons/fa';

const SocialMediaButtons = () => {
    const iconStyle = { fontSize: '1.8rem', color: '#fff' }; // Adjust the icon size and color here

    const ClickHandler = (event) => {
        event.preventDefault();
        const href = event.currentTarget.getAttribute('href');
        window.open(href, '_blank');
    };

    return (
        <ul style={{ display: 'flex', listStyle: 'none', padding: 0, margin: 0 }}>
            <li style={{ margin: '0 10px' }}>
                <Link onClick={ClickHandler} href="https://wa.me/message/VCDI6QIX546XF1" style={{ textDecoration: 'none' }}>
                    <FaWhatsapp style={iconStyle} />
                </Link>
            </li>
            <li style={{ margin: '0 10px' }}>
                <Link onClick={ClickHandler} href="https://t.me/dokkaneldraib" style={{ textDecoration: 'none' }}>
                    <FaTelegramPlane style={iconStyle} />
                </Link>
            </li>
            <li style={{ margin: '0 10px' }}>
                <Link onClick={ClickHandler} href="https://youtube.com/@dokkaneldraib1079?si=fRO9lwinG9BSc_Ik" style={{ textDecoration: 'none' }}>
                    <FaYoutube style={iconStyle} />
                </Link>
            </li>
            <li style={{ margin: '0 10px' }}>
                <Link onClick={ClickHandler} href="https://www.linkedin.com/in/mostafa-salama-24476253?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" style={{ textDecoration: 'none' }}>
                    <FaLinkedin style={iconStyle} />
                </Link>
            </li>
            <li style={{ margin: '0 10px' }}>
                <Link onClick={ClickHandler} href="https://www.facebook.com/dokkaneldraib2?mibextid=LQQJ4d" style={{ textDecoration: 'none' }}>
                    <FaFacebook style={iconStyle} />
                </Link>
            </li>
            <li style={{ margin: '0 10px' }}>
                <Link onClick={ClickHandler} href="https://maps.app.goo.gl/zMByDsBE8iNmd2wM9?g_st=com.google.maps.preview.copy" style={{ textDecoration: 'none' }}>
                    <FaMapMarkerAlt style={iconStyle} />
                </Link>
            </li>
        </ul>
    );
};

export default SocialMediaButtons;
