amber/src/components/SocialMedia/SocialMedia.jsx

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',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 5,
        padding: 2,
        py: 4,
        borderTop:"1px solid #CFCFCF",
        borderBottom:"1px solid #CFCFCF"
      }}
    >
      {socialMedia.map((media, index) => (
        <Box
          key={index}
          sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
          }}
        >
          {media.icon}
          <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
            {media.name}
          </Typography>
        </Box>
      ))}
    </Box>
  );
};

export default SocialMedia;