import axios from 'axios';
import { GetStaticProps, NextPage } from 'next'

import styles from './nav.module.css'

// ##########
// This component adds and is respodsible for navigation present on the pages. 
// this does NOT edit the main screen menu.
// ##########


// images
import Logo from '../../assets/logo/logo.png'
import Image from 'next/image'
import Link from 'next/link'


// TYpes and interfaces for props passed onto nav
type Menu = {
  menu:any
}

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

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

export  const Nav = (menu:Menu) => {
  return (
      <div className={styles.navigate}>
        <Link className={styles.logo} href="/aboutus">
            <Image src={Logo} alt='creative discovery logo' width={264} height={70} />
        </Link>
        <nav className={styles.navopt}>
          <div className={styles.options}>
            <ul className={styles.menuarea}>
              {menu.menu.data.attributes.structure.map((item: {title: string ; link: string; }) => (
                <li
                  key={item.title + Math.random()}
                  className="font-semibold tracking-tight text-slate-800"
                >
                  <Link href={item.link}>
                    <span>{item.title}</span>
                  </Link>
                </li>
              ))} 
            </ul>  
          </div>
          <div className={styles.budgetsec}>
            <Link className={styles.budget} href="/contacts">
                  <span>Pedir Orçamento</span>
            </Link>
          </div>
        </nav>
        {/* <div className={styles.navmob}><Link href="/">Hello?</Link></div> */}

      </div>
  );
}

export default Nav;


