'use client'

import PropTypes from 'prop-types'
import Container from '@mui/material/Container'
import Grid from '@mui/material/Unstable_Grid2'
import Typography from '@mui/material/Typography'
import useMediaQuery from '@mui/material/useMediaQuery'

import {styled} from '@mui/material/styles'

import TeksKat from './teks-kat'

const PREFIX = 'denye-teks'

const classes = {
  container: `${PREFIX}-container`
}

const Root = styled('div')(props => ({
  [`&.${classes.container}`]: {
    marginTop: '4em',
    marginBottom: '2em',
    marginLeft: props.isMobile ? '' : '240px',
  }
}))

export default function DenyeTeks({denyeTeks}) {
  const isMobile = useMediaQuery('(max-width:600px)')

  return (
    <Root isMobile={isMobile} className={classes.container}>
      <Container align='center'>
        {denyeTeks.length === 0 && (
          <Container sx={{marginTop: 2}} align='center'>
            <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h4'>
              Aucun résultat
            </Typography>
          </Container>
        )}
        <Grid container spacing={3}>
          {denyeTeks.map(t => <TeksKat key={t.id} parole={t} />)}
        </Grid>
      </Container>
    </Root>
  )
}

DenyeTeks.propTypes = {
  denyeTeks: PropTypes.array.isRequired
}