import React from 'react'
import Card from '@mui/material/Card'
import { CardContent, CardMedia, Grid } from '@mui/material'
import Typography from '@mui/material/Typography'
import styles from './GridComp.module.css'

// const Rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
export default function GridComp({ name, data }) {
    return (
        <div>
            <Typography
                component="h1"
                sx={{ fontSize: 25, fontFamily: 'Montserrat' }}
            >
                {name}
            </Typography>
            <Grid container spacing={2} sx={{ width: '100%' }} xs={9}>
                {(data || []).map((item) => (
                    <Grid item xs={12} sm={3}>
                        <Card sx={{ height: '100%' }}>
                            <a href="/" className={styles.aboximg}>
                                <CardMedia className={styles.MediaCard}>
                                    <div style={{ boxSizing: 'inherit' }}>
                                        <div className={styles.divbgimg}>
                                            <div className={styles.divbgimg2}>
                                                <img
                                                    alt=""
                                                    className={styles.imgBg}
                                                    src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="
                                                />
                                                <img
                                                    alt=""
                                                    className={
                                                        styles.imgPreViev
                                                    }
                                                    src={item.PosterUrlPreview}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    {/* <img src='https://avatars.mds.yandex.net/get-kinopoisk-image/4303601/1003770f-bc50-4ad5-b951-ea2b954a5300/360'></img> */}
                                </CardMedia>
                            </a>

                            <CardContent>
                                <Typography
                                    component="h5"
                                    className={styles.title}
                                >
                                    {item.Ru_title}
                                </Typography>
                                <Typography
                                    variant="body2"
                                    color="text.secondary"
                                >
                                    {item.Orig_title}
                                </Typography>
                                <Typography
                                    variant="body2"
                                    sx={{ display: 'block' }}
                                >
                                    {(item.Genres || []).map((e) => (
                                        <a className={styles.Janres} href="/">
                                            {e.genre}
                                        </a>
                                    ))}
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                ))}
            </Grid>
        </div>
    )
}