import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'

import { redirect } from 'next/navigation';


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


// Components
import Menu from '../components/Menu/Menu'





// SHOULDNG BE PART OF THE HOME ========================================


import { GetStaticProps, NextPage } from 'next'
import { useState } from 'react'

import dynamic from 'next/dynamic';


import {settings, loadAbout, loadPartners, loadMenu} from './../constants/constants'



// 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 ContentProp = {
  [key:string]: any,
  title:string,
  main_description:string,
  createdAt: string,  
  updatedAt: string,
  publishedAt:string
}

type Props = {
  [key:string]:any; 
  menu: any,
  content:any,
  partners:any,
}


//  API acall
export const getStaticProps: GetStaticProps = async (context) =>{
  const menu: Menu = await loadMenu()
  const content: ContentProp = await loadAbout()
  const partners: ContentProp = await loadPartners()
// Returns props to the actual page
  return {
    props: {
      menu: menu,
      content: content,
      partners: partners,

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


// SHOULDNG BE PART OF THE HOME ========================================
const Aboutus = dynamic(() => import('./aboutus'));

export default function Home(props:Props) {
  const propsMore = {
    menu:props.menu,
    content: props.content,
    partners: props.partners

  }
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Creative Discovery</title>
        <meta name="description" content="Creative Discovery" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Aboutus {...propsMore} />
    </div>
  )
}
