import { Container, Box, Typography, Grid, Card, CardContent, Stack } from '@mui/material';

import Logo1 from '../../../assets/partners/logo1.png';
import Logo2 from '../../../assets/partners/logo2.png';
import Logo3 from '../../../assets/partners/logo3.png';
import Logo4 from '../../../assets/partners/logo4.png';
import Logo5 from '../../../assets/partners/logo5.png';
import Logo6 from '../../../assets/partners/logo6.png';
import Logo7 from '../../../assets/partners/logo7.png';
import Logo8 from '../../../assets/partners/logo8.png';
import Logo9 from '../../../assets/partners/logo9.png';
import Logo10 from '../../../assets/partners/logo10.png';

export const Partners = () => {
  return (
    <Container>
      <Box>
        <Typography component="h2" variant="h2" gutterBottom sx={{ color: 'text.primary', textAlign: 'center' }}>
          Наши Партнеры
        </Typography>
        <Stack direction="column" spacing={2} sx={{ width: '100%' }}>
          <Grid container spacing={2}>
            <Grid size={4}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo1} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={4}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo2} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={4}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo3} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
          </Grid>
          <Grid container spacing={2}>
            <Grid size={4}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo4} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={4}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo5} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={4}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo6} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
          </Grid>
          <Grid container spacing={2}>
            <Grid size={3}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo7} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={3}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo8} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={3}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo9} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
            <Grid size={3}>
              <Card sx={{ textAlign: 'center', p: 2 }}>
                <CardContent>
                  <img src={Logo10} style={{ width: '100%' }} />
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Stack>
      </Box>
    </Container>
  );
};
