// @flow strict
"use client";

import * as React from 'react';
import { useState, useEffect } from 'react';

import styles from './Menu.module.css'
import Image from 'next/image'
import Link from 'next/link'
import { NextComponentType } from 'next';


import axios from 'axios';
import config from "../../config"



// This is the componnent for the menu, current it should only get the
// tdata for the menu and to start the entire app 





// images
import Logo from '../../assets/logo/logo.png'

export async function getStaticProps() {
    // const token = process.env.STRAPI_TOKEN
    let token = "f6af8c114107154b846b1c770177d07afc5b0e0216ab5342bb3935d221ede751160e981300688f17e079109e0309fe489a791cdf71b53a6023da8e80f0877f24fae52089f204d3cf13d3fa58b23d59fc54b59473230c2876967c296623665da4c7d02b865db3923fc2147f34b5a854fece036fb254b5827c4801513928d605a0";
    return await axios.get( `${process.env.NEXT_PUBLIC_BASE_URL}/api/start/`, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
      .then(res => {
        const data = res.data
        return {
          props: {
            data: data,
          },
          // Next.js will attempt to re-generate the page:
          // - When a request comes in
          // - At most once every 10 seconds
          revalidate: 10, // In seconds
        }
      })
      .catch(error => console.error(error));


  }



const Menu: NextComponentType = (data) => {
    const [start, setStart] = useState(null);
    console.log(data)
    return (
        <div className={styles.menu}>
            <div className={styles.logo}>
                <Link href="/">
                    <Image src={Logo} alt='creative discovery logo' width={264} height={70}/>
                </Link>
            </div>
            <div className  ={styles.seo}>
                <h1 className={styles.title}>data.data.attributes.Title</h1> 
                <h2 className={styles.description}>data.data.attributes.Description</h2>
            </div>
            <div className={styles.top}>
                <div className={styles.primary}>
                    <nav className={styles.main}>
                        <Link href="/aboutus">Sobre Nós</Link>
                        <Link href="/projects">Projetos</Link>
                        <Link href="/services">Serviços</Link>
                        <Link href="/partners">Parceiros</Link>
                    </nav>
                </div>
            </div>

            <div className={styles.bottom}>
                <nav className={styles.secondary}>
                    <a href="#">Jobs</a>
                    <a href="#">Contact</a>
                </nav>
            </div>
            <div className={styles.socialmedia}>
                <nav className={styles.secondary}>
                    <a href="#">Jobs</a>
                    <Link href="/contacts">Contact</Link>
                </nav>
            </div>

            
        </div>
    );
};

export default Menu;