import React from 'react'
import { Box, Card, Stack, Typography } from '@mui/material'
import Image from 'next/image'
import { trpc } from '@/utils/trpc'
import trainerData from './trainers-data.json'

const TrainersCards = () => {
  return (
    <>
    {trainerData.map((coach, index) => (
      <Card sx={{maxWidth: '250px'}} key={index}>
        <Stack>
          <Box
            sx={{
              width: '250px',
              height: '300px',
              position: 'relative',
              objectFit: 'cover',
              backgroundImage: 'linear-gradient(0deg, rgba(234,234,234,1) 0%, rgba(0,0,0,0) 30%)'
            }}
          >
            <Image style={{ objectFit: 'contain'}} fill={true} src={'/charlee/charlee_1.png'} alt={'personal image'} />
          </Box>
          <Stack
            sx={{
              px: '1rem',
              py: '0.5rem',
              backgroundColor: '#00000010'
            }}
            spacing={1}
            direction={'row'}
            justifyContent={'center'}
            alignItems={'center'}
          >
            <Box component={'img'} src='/logo.png' sx={{width: '22px', height: '22px'}} />
            <Typography sx={{mb: 0, fontWeight: 800, textTransform: 'capitalize'}}>{coach.type}</Typography>
            <Typography>|</Typography>
            <Typography sx={{fontWeight: 800, textTransform: 'capitalize'}}>{`${coach.firstName} ${coach.lastName.charAt(0).toUpperCase()}.`}</Typography>
          </Stack>
          <Stack
            sx={{
              px: '12px',
              py: '20px'
            }}
            alignItems={'center'}
          >
            <Typography fontSize={'15px'} variant='subtitle1' mb={'10px'}>
              {coach.subtitle}
            </Typography>
            <Typography fontSize={'15px'} textAlign={'center'}>
              {coach.description}
            </Typography>
          </Stack>
        </Stack>
      </Card>
      ))}
    </>
  )
}

export default TrainersCards