import { Container, Typography } from '@mui/material';
import Image from 'next/image';

const FeatureItem = ({ image, alt, description }) => {
  return (
    <Container
      sx={{
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        marginTop: { xs: '50px' },
      }}
    >
      <Image src={image} alt={alt} width={100} height={100} />
      <Typography
        sx={{
          mt: 6,
          px: 6,
        }}
      >
        {description}
      </Typography>
    </Container>
  );
};

export default FeatureItem;