import { Box, Grid, Stack, Typography, Card, Button } from '@mui/material'
import { useCustomTheme } from '@/themes/useCustomTheme'
import TrainersCards from '../trainers/trainers-cards';

const Trainers = () => {
  const theme = useCustomTheme();
  return (
    <Stack
      sx={{
        px: theme.customProperties.sectionPaddingX,
        minHeight: '100vh',
      }}
      justifyContent={'center'}
    >
      <Grid container spacing={1}>
        <Grid item xs={12} md={8} lg={6}>
          <Typography variant='h2' mb={'25px'}>Recieve genuine support</Typography>
          <Typography variant='body2' sx={{mb: '50px', fontSize: '1.33rem'}}>No matter your fitness goals you&apos;re not in this alone. Have unparalleled coaching by your side during your fitness journey</Typography>
          {/*<Button variant='content'>See All Trainers</Button>*/}
        </Grid>
        <Grid item xs={12} md={4} lg={6}>
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center'
            }}
          >
            <Box>
              <TrainersCards />
            </Box>
          </Box>
        </Grid>
      </Grid>
    </Stack>
  )
}

export default Trainers