import Link from "next/link"

import Image from "@/components/Image"

import Menu from "./Menu"
import User from "./User"

import styles from "./mainMenu.module.css"

export interface MenuItem {
  id: string
  title: string
  href: string
  children?: {
    groupTitle: string
    children: {
      id: string
      title: string
      href: string
    }[]
  }[]
  seeAllLinkText?: string
  infoCard?: {
    scriptedTitle: string
    title: string
    description: string
    ctaLink: string
  }
}

export default async function MainMenu() {
  const menuItems: MenuItem[] = [
    {
      id: "hotels",
      title: "Hotels",
      href: "/hotels",
      children: [],
    },
    {
      id: "business",
      title: "Business",
      href: "/business",
      children: [
        {
          groupTitle: "Top conference venues",
          children: [
            {
              id: "stockholm",
              title: "Stockholm",
              href: "/stockholm",
            },
            {
              id: "bergen",
              title: "Bergen",
              href: "/bergen",
            },
            {
              id: "copenhagen",
              title: "Copenhagen",
              href: "/copenhagen",
            },
          ],
        },
        {
          groupTitle: "Scandic for business",
          children: [
            {
              id: "book-a-venue",
              title: "Book a venue",
              href: "/book-a-venue",
            },
            {
              id: "conference-packages",
              title: "Conference packages",
              href: "/conference-packages",
            },
            {
              id: "co-working",
              title: "Co-working",
              href: "/co-working",
            },
          ],
        },
      ],
      seeAllLinkText: "See all conference & meeting venues",
      infoCard: {
        scriptedTitle: "Stockholm",
        title: "Meeting venues in Stockholm",
        description:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et felis metus. Sed et felis metus.",
        ctaLink: "/stockholm",
      },
    },
    {
      id: "offers",
      title: "Offers",
      href: "/offers",
    },
    {
      id: "restaurants",
      title: "Restaurants",
      href: "/restaurants",
    },
  ]
  return (
    <div className={styles.mainMenu}>
      <nav className={styles.content}>
        <Link className={styles.logoLink} href="/">
          <Image
            alt="Back to scandichotels.com"
            className={styles.logo}
            data-js="scandiclogoimg"
            data-nosvgsrc="/_static/img/scandic-logotype.png"
            itemProp="logo"
            height={24}
            src="/_static/img/scandic-logotype.svg"
            width={113}
          />
        </Link>
        <Menu items={menuItems} />
        <User />
      </nav>
    </div>
  )
}