import React from 'react';
import { Box, Typography } from '@mui/material';
import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';

const SocialMedia = () => {
  const socialMedia = [
    { icon: <InstagramIcon color="primary" />, name: 'Instagram', link: 'https://www.instagram.com/amber.officials/?hl=en'  },
    { icon: <FacebookIcon color="primary" />, name: 'Facebook', link: 'https://www.facebook.com/amber.officials/' },
    { icon: <TwitterIcon color="primary" />, name: 'Twitter', link: 'https://twitter.com/amber.officials' },
  ];

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row', // Stack on small screens
        justifyContent: 'center',
        gap: 8,
        padding: 2,
        py: 4,
        borderTop: '1px solid #CFCFCF',
        borderBottom: '1px solid #CFCFCF',
        cursor: 'pointer'
      }}
    >
      {socialMedia.map((media, index) => (
        <Box
          key={index}
          onClick={()=>{
            window.open(media.link, '_blank')
          }}
          sx={{
            display: 'flex',
            flexDirection: { xs: 'column', sm: 'row' }, // Stack icon and text on small screens
            alignItems: 'center',
            gap: 1,
          }}
        >
          {media.icon}
          <Typography variant="body1" sx={{fontWeight: 'bold', color:'#000',':hover':{color:"#95AAC5"}}}>
            {media.name}
          </Typography>
        </Box>
      ))}
    </Box>
  );
};

export default SocialMedia;