import React from "react";
import { Link } from "gatsby";
import { IGatsbyImageData } from "gatsby-plugin-image";

import CardList from "./core/CardList";


interface INew {
    title?: string;
    content?: string;
    image?: string | IGatsbyImageData;
    to?: string;
}

interface Props {
    news?: INew[];
    toAll?: string;
}


const News = ({ news=[], toAll='#' }: Props) => {
    return (
        <>
            <h2 className="mt-2 text-3xl font-extrabold tracking-tight sm:text-4xl mb-8">Actualités</h2>
            <CardList 
                cards={news} 
                layout='grid'
            />
            <div className="flex justify-center mt-8">
                <Link to={toAll} className="btn btn-active">Plus d'actualités</Link>
            </div>
        </>
    )
};


export default News;