import React from "react"
import { useStaticQuery, graphql } from "gatsby"

import CardList from "./core/CardList"
import Button from "./core/Button"
import { cx } from "classix"

// Ineherit type from cardlist ?
interface INews {
    title?: string
    action?: {
        name?: string
        url?: string
        classname?: string
    }
    anime?: boolean
    layout?: "row" | "col" | "grid"
    size?: "xs" | "base" | "xl"
    options?: object
}

const News = (props: INews) => {
    const data = useStaticQuery(graphql`
        query getNews {
            directus {
                news(
                    limit: 3
                    filter: { status: { _eq: "published" } }
                    sort: ["-pinned", "-date_published"]
                ) {
                    id
                    slug
                    content
                    title
                    date_published
                    image {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData
                            }
                        }
                    }
                }
            }
        }
    `)

    const {
        title = "",
        anime,
        action,
        size = "xs",
        layout = "grid",
        options = {
            card: {},
            cards: {},
            action: {},
            actions: {},
            style: {},
        },
    } = props

    const news = data.directus.news.map((dtNew) => {
        return {
            name: dtNew.title,
            description: dtNew.content,
            image: dtNew.image?.imageFile,
            url: "/news/" + dtNew.slug,
            size: size,
            anime: anime || options.anime,
            options: options?.card,
        }
    })

    return (
        <div className={cx(options.style.main)}>
            <h2
                className={cx(
                    "mb-6 p-2 text-3xl font-extrabold tracking-tight sm:text-4xl",
                    options.style.title
                )}
            >
                {title}
            </h2>
            <CardList cards={news} layout={layout} {...options.cards} />
            <div
                className={cx(
                    "mt-8 flex justify-center",
                    options.style.actions
                )}
            >
                {action && <Button {...action} {...options.action} />}
            </div>
        </div>
    )
}

export default News