"use client"
import NextLink from "next/link"
import { useIntl } from "react-intl"

import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"

import useDropdownStore from "@/stores/main-menu"

import useLang from "@/hooks/useLang"

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

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"

export function LogoLink() {
  const lang = useLang()
  const intl = useIntl()
  const { toggleDropdown, isHamburgerMenuOpen } = useDropdownStore()

  function handleNavigate() {
    if (isHamburgerMenuOpen) {
      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
    }
  }

  return (
    <NextLink
      className={styles.logoLink}
      href={`/${lang}`}
      onClick={handleNavigate}
      aria-label={intl.formatMessage({
        defaultMessage: "Back to scandichotels.com",
      })}
    >
      <ScandicLogoIcon
        width="103px"
        height="22px"
        color="Icon/Interactive/Accent"
      />
    </NextLink>
  )
}