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' },
    { icon: <FacebookIcon color="primary" />, name: 'Facebook' },
    { icon: <TwitterIcon color="primary" />, name: 'Twitter' },
  ];

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: { xs: 'column', sm: 'row' }, // Stack on small screens
        justifyContent: 'center',
        gap: 8,
        padding: 2,
        py: 4,
        borderTop: '1px solid #CFCFCF',
        borderBottom: '1px solid #CFCFCF',
      }}
    >
      {socialMedia.map((media, index) => (
        <Box
          key={index}
          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' }}>
            {media.name}
          </Typography>
        </Box>
      ))}
    </Box>
  );
};

export default SocialMedia;