import React from "react";
import { Box, Typography, Grid } from "@mui/material";

type IconBoxProps = {
  index: number;
  icon: any;
  title: string;
  description: string;
}

const IconBox = ({index, icon, title, description}: IconBoxProps) => {
  return (
    <Grid key={index} item xs={4} md={6}>
      <Box
        sx={{
          border: 1,
          borderColor: 'secondary.main',
          borderRadius: '8px',
          padding: '15px 14px',
          backgroundColor: '#FFF'
        }}
      >
        <Box 
          sx={{
            mb: '10px'
          }}
        >
          {icon}
        </Box>
        <Typography variant='h4' sx={{ fontWeight: '800'}}>
          {title}
        </Typography>
        <Typography sx={{
          display: {xs: 'none', md: 'block'}
        }}>
          {description}
        </Typography>
      </Box>
    </Grid>
  )
}

export default IconBox;