import React from 'react';

import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";
import Paginations from "components/Pagination/Pagination.js";
import Icon from "@material-ui/core/Icon";
import CardHeader from "components/Card/CardHeader.js";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, news, ...props }) {
    const classes = useStyles();
    const latnews = news.map((data) => {
        return (
        <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
            <Card style={{width: "20rem"}}>
                <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src={`${backend}${data.img[0]["url"]}`}
                />
                <CardBody>
                <p>{data.title}</p>
                <p>{data.published_at}</p>
                <Button color="info" round href={"/honda/latest_news/latestnews_details?s="+data.id}>
                    <Icon className={classes.icons}>open_in_new</Icon>Read More
                </Button>
                </CardBody>
            </Card>
        </Grid>
        );
    })
    return (
        <Card className={classes.textCenter}>
            <div align="center">
                <CardHeader color="info">News</CardHeader>
            </div>
            <CardBody>
                <div align="center">
                <h2>Latest News</h2>
                </div>
                <GridContainer justify="center">
                {latnews}
                </GridContainer>
            </CardBody>
            <div align="center">
                <Paginations
                pages={[
                    { text: "PREV" },
                    { text: 1 },
                    { text: 2 },
                    { active: true, text: 3 },
                    { text: 4 },
                    { text: 5 },
                    { text: "NEXT" }
                ]}
                color="info"
                />
            </div>
        </Card>
    );
}

export default DataLatestNews;