import React from "react"

import { Button, Card } from "@onegeo/gatsby-theme-onegeo"

interface Service {
    name: string
    description: string
    image: string
    url: string
}
interface Action {
    name: string
    url: string
}
interface Props {
    title: string
    subtitle: string
    content: string
    action: Action
    services: Array<Service>
}

const Hero = (props: Props) => {
    // Data structure (default value)
    const {
        title = "eGEO Project",
        subtitle = "Hub géospatial collaboratif",
        content = "Solution Open Source sur-mesure pour communiquer et valoriser les données disponibles sur votre territoire ou vos infrastructures.",
        action = {
            name: "Découvres nos cartes interactives",
            url: "#",
        },
        services = [
            {
                name: "Datastore",
                description: "Accédez à votre catalogue de données.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
            {
                name: "Map",
                description:
                    "Consulter, gérer, mettre à jour et diffuser vos contenus cartographiques.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
            {
                name: "Dataviz",
                description: "Croisez et mettez en forme vos données.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
            {
                name: "Contrib",
                description: "Validez et collectez vos informations.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
        ],
    } = props

    return (
        <div className="hero min-h-screen bg-[url('../images/fond.png')]">
            {/* <div className="hero-overlay bg-opacity-60"></div> */}
            <div className="hero-content text-center text-neutral-content">
                <div className="max-w-4xl">
                    <h1 className="mb-5 text-3xl lg:text-6xl font-extrabold tracking-tight">
                        {title}
                        <div className="text-primary">{subtitle}</div>
                    </h1>
                    <p className="mb-10">{content}</p>
                    {action ? (
                        <Button
                            className="btn-primary text-white"
                            {...action}
                        />
                    ) : null}
                </div>
            </div>
            <div className="row-start-2 flex flex-col lg:flex-row gap-6 mx-6">
                {services &&
                    services.map((service, idx) => (
                        <Card key={idx} {...service} />
                    ))}
            </div>
            <div className="row-start-3">&nbsp;</div>
        </div>
    )
}

export default Hero