import { Box, Grid } from '@mui/material'
import React from 'react'
import { useCustomTheme } from '@/themes/useCustomTheme'


const partners = ['voltagemovement']
const Partners = () => {
    const theme = useCustomTheme()
  return (
    <Box
        sx={{
            width: '100%',
        }}
    >
        <Box sx={{
            px: theme.customProperties.sectionPaddingX,
            mt: { xs: '20px', md: '0'}
        }}
        >
            <Grid 
                container 
                sx={{
                    justifyContent:'center',
                    alignItems: 'center',
                    paddingY: { xs: '5px', md: '15px' },
                }}
                >
                {partners.map((partner, index) => (
                <Grid
                    item
                    key={index}
                    xs={4}
                    md={3}
                    sx={{
                        display: 'flex',
                        justifyContent: 'center'
                    }}
                >
                    <Box
                        component="img"
                        draggable={false}
                        src={`/${partner}.png`}
                        sx={{ maxWidth: {xs: '33.33333%', md:'120px'}}}
                        />
                </Grid>
                ))}
            </Grid>
        </Box>
    </Box>
  )
}

export default Partners