import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { GetStaticProps, NextPage } from 'next'
import { useState } from 'react'

// Style modules 
import styles from '../styles/home.module.css'

import {settings, loadServices,    } from './../constants/constants'

// Components

import Layout from '../components/Layout/Layout'
import axios from 'axios'
import HeroText from '../components/HeroText/HeroText'
import MidTitle from '../components/MidTitle/midTitle'

// Struturing and typing of the props called on the api
type Menu = {
  id: number,
  attributes: AttributesMenu,
	meta: Object
}

interface AttributesMenu {
  structure: Structure[],
  createdAt: string,  
  updatedAt: string,
  publishedAt:string
}

interface Structure extends AttributesMenu{
  link:string;
  title:string;
}

// [key:string]: any - this adds tolerance when the prop received has more than we asked for.


type Content = {
  [key:string]:any;
  title:string;
  main_description:string;
  createdAt: string,  
  updatedAt: string,
  publishedAt:string
}

type Prop = {
  [key:string]: any,
  menu:any,
  content:any
}

export const getStaticProps: GetStaticProps = async (context) =>{
  const token = process.env.STRAPI_TOKEN; // Replace with your actual token
  const headers = { Authorization: `Bearer ${token}` };

  let res = await axios.get( `${process.env.NEXT_PUBLIC_BASE_URL}/api/mainmenu/`, { headers });
  const menu: Menu = await res.data
  
  const content: Content = await loadServices()

  return {
    props: {
      menu: menu,
      content: content,
      // Next.js will attempt to re-generate the page:
      // - When a request comes in
      // - At most once every 10 seconds
      revalidate: 10, // In seconds
    }
  }
}


export const Services:NextPage = (props: Prop) => {
  const [content, setContent] = useState(props.content.data.attributes)
  const [menu, setMenu] = useState(props.menu.data.attributes)


  return (
    <div className={styles.container}>
      <Head>
        <title>Creative Discovery</title>
        <meta name="description" content="Creative Discovery" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout menu={props.menu}>
          <HeroText title={content.title} maindesc={content.main_description} />
          <MidTitle text={content.mid_heading}/>
      </Layout>
    </div>
  )
}

export default Services
