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

interface Props {
    children?: React.ReactNode
    className?: string
    icon?: JSX.Element
    title?: string
    iconColor?: string
    valueColor?: string
    descriptionColor?: string
}

const Stats = (props: Props) => {
    const getStats = useStaticQuery(graphql`
        query getStats {
            directus {
                counts {
                    id
                    name
                    value
                    description
                }
            }
        }
    `)

    const stats = getStats.directus.counts

    const {
        children,
        className = "",
        iconColor,
        valueColor,
        descriptionColor,
        icon,
        title = "Données disponibles sur la plateforme",
    } = props

    return (
        <>
            <h3 className="mt-3 text-xl"> {title} </h3>
            <div className={`stats shadow my-3 ${className}`}>
                {stats.map((stat: any) => (
                    <div key={stat.id} className="stat">
                        {icon ? (
                            <div className={`stat-figure ${iconColor}`}>
                                {icon}
                            </div>
                        ) : (
                            <></>
                        )}
                        <div className="stat-title">{stat.name}</div>
                        <div className={`stat-value ${valueColor}`}>
                            {stat.value}
                        </div>
                        {stat.description ? (
                            <div
                                className={`stat-description ${descriptionColor}`}
                            >
                                {stat.description}
                            </div>
                        ) : (
                            <></>
                        )}
                        {children ? (
                            <div className="stat-actions">{children}</div>
                        ) : (
                            <></>
                        )}
                    </div>
                ))}
            </div>
        </>
    )
}

export default Stats