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: '1em',
    marginBottom: '2em'
  }
}))

export default function DenyeTeks(denyeTeks) {
  return (
    <Root className={classes.container}>
      <Container>
        <Grid container spacing={3}>
          {Object.values(denyeTeks).map(t => <TeksKat key={t.id} teks={t} />)}
        </Grid>
      </Container>
    </Root>
  )
}