import {Container, Grid} from '@mui/material'

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: '4.5em'
  }
}))

export default function DenyeTeks(teks) {
  const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
    const aDate = new Date(a.published_at)
    const bDate = new Date(b.published_at)
    return bDate.getTime() - aDate.getTime()
  }).slice(0, 6)

  return (
    <Root className={classes.container}>
      <Container>
        <Grid container spacing={3}>
          {teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
        </Grid>
      </Container>
    </Root>
  )
}