"use client"

import { useEffect, useState } from "react"
import { useMediaQuery } from "usehooks-ts"

import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/OldDSLink"

import useLang from "@/hooks/useLang"

import { MobileMenu } from "./MobileMenu"
import { NavigationMenu } from "./NavigationMenu"

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

export function Menu() {
  const lang = useLang()
  const checkIfMobile = useMediaQuery("(max-width: 767px)")
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    setIsMobile(checkIfMobile)
  }, [checkIfMobile])
  return (
    <div className={styles.container}>
      <Link href={`/${lang}`}>
        <Image
          alt="SAS logotype"
          className={styles.logo}
          src="/_static/img/sas-logotype-white.svg"
          height={32}
          width={90}
          sizes="100vw"
        />
      </Link>
      {isMobile ? (
        <MobileMenu>
          <NavigationMenu isMobile={true} />
        </MobileMenu>
      ) : (
        <NavigationMenu isMobile={false} />
      )}
    </div>
  )
}