import React from "react";

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

interface Service {
  title: string;
  content: string;
  icon: string;
}
interface Action {
  title: string;
  to: string;
}
interface Props {
  title: string;
  subtitle: string;
  description: string;
  action: Action;
  services: Array<Service>;
}

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

export default Hero;