import React, { useState, useEffect } from 'react';

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

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, news, ...props }) {
    const classes = useStyles();
    const latnews = news.map((data) => {
        return (
        <div className={classes.section} style={{padding:"40px"}}>
            <div align="center" style={{marginTop:"-40px"}}>
                <h2>{data.title}</h2>
            </div><br></br><br></br>
            <div align="center">
                <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
                <div><br></br>
                {data.published_at}
                </div>
            </div><br></br>
            <h5 align="justify">
                {data.description}
            </h5>
        </div>
        );
    })
    return (
        <div>
            {latnews}
        </div>
    );
}

export default DataLatestNews;