'use client'

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

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

import TeksKat from './teks-kat'

const PREFIX = 'denye-teks'

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

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

  '@media (max-width: 600px)': {
    marginLeft: '0',
  },

  '@media (min-width: 600px)': {
    marginLeft: '240px',
  },
}))

export default function DenyeTeks({denyeTeks}) {
  return (
    <Root 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
}