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
                            }
                            name
                            publicURL
                        }
                    }
                }
            }
        }
    `)
    /*
    options = {
        card: {},
        cards: {},
        action: {},
        actions: {},
        class: {
            main: {},
            title: {},
            actions: {},
        },
    },
    */
    const {
        title = "",
        anime,
        action,
        size = "xs",
        layout = "grid",
        options = {},
    } = props

    const oClass = options.class || {}

    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 data-theme={options.theme} className={cx(oClass.main)}>
            <h2
                className={cx(
                    "mb-6 p-2 text-2xl font-extrabold tracking-tight sm:text-3xl",
                    oClass.title
                )}
            >
                {title}
            </h2>
            <CardList cards={news} layout={layout} {...options.cards} />
            <div className={cx("my-8 flex justify-center", oClass.actions)}>
                {action && <Button {...action} {...options.action} />}
            </div>
        </div>
    )
}

export default News