// import Link from "next/link"
// import { signIn, signOut, useSession } from "next-auth/react"
// import styles from "../styles/header.module.css"

// // The approach used in this component shows how to build a sign in and sign out
// // component that works on pages which support both client and server side
// // rendering, and avoids any flash incorrect content on initial page load.
// export default function Header() {
//   const { data: session, status } = useSession()
//   const loading = status === "loading"

//   //generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss




//   return (
//     <header className="">
//       <noscript>
//         <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
//       </noscript>
//       {/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */}
//       <div className={styles.signedInStatus}>
//         <p className={`nojs-show ${!session && loading ? styles.loading : styles.loaded}`}>
//           {!session && (
//             <>
//               <span className={styles.notSignedInText}>
//                 You are not signed in
//               </span>
//               <a
//                 href={`/api/auth/signin`}
//                 className={styles.buttonPrimary}
//                 onClick={(e) => {
//                   e.preventDefault()
//                   signIn()
//                 }}
//               >
//                 Sign in
//               </a>
//             </>
//           )}
//           {session?.user && (
//             <>
//               {session.user.image && (
//                 <span
//                   style={{ backgroundImage: `url('${session.user.image}')` }}
//                   className={styles.avatar}
//                 />
//               )}
//               <span className={styles.signedInText}>
//                 <small>Signed in as</small>
//                 <br />
//                 <strong>{session.user.email ?? session.user.name}</strong>
//               </span>
//               <a
//                 href={`/api/auth/signout`}
//                 className={styles.button}
//                 onClick={(e) => {
//                   e.preventDefault()
//                   signOut()
//                 }}
//               >
//                 Sign out
//               </a>
//             </>
//           )}
//         </p>
//       </div>
//       {/* <nav className="max-w-7xl mx-auto ">
//         <ul className={styles.navItems}>
//           <li className={styles.navItem}>
//             <Link href="/">Home</Link>
//           </li>
//           <li className={styles.navItem}>
//             <Link href="/client">Client</Link>
//           </li>
//           <li className={styles.navItem}>
//             <Link href="/server">Server</Link>
//           </li>
//           <li className={styles.navItem}>
//             <Link href="/protected">Protected</Link>
//           </li>
//           <li className={styles.navItem}>
//             <Link href="/api-example">API</Link>
//           </li>
//           <li className={styles.navItem}>
//             <Link href="/admin">Admin</Link>
//           </li>
//           <li className={styles.navItem}>
//             <Link href="/me">Me</Link>
//           </li>
//            <li className={styles.navItem}>
//                    CART
//           {/* cart submenus * / }
//       <ul className={styles.submenu}>
//         <li className={styles.submenuItem}>
//           <Link href="/cart/locations">Locations</Link>
//         </li>
//         <li className={styles.submenuItem}>
//           <Link href="/cart/publishers">Publishers</Link>
//         </li>
//         <li className={styles.submenuItem}>
//           <Link href="/cart/availabilities">Availabilities</Link>
//         </li>
//         <li className={styles.submenuItem}>
//           <Link href="/cart/cartevents">Cart Event</Link>
//         </li>
//       </ul>

//     </li>
//           {/* end cart submenus * / }

//       <li className={styles.navItem}>
//         <Link href="/cart/calendar">Calendar</Link>
//       </li>
//     </ul >
//       </nav > */ }

//     </header >
//   )
// }