"use client"
import { cx } from "class-variance-authority"
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"

interface LogoLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
  isInverted?: boolean
}

export function LogoLink({
  isInverted = false,
  "aria-label": ariaLabel,
  ...props
}: LogoLinkProps) {
  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={
        ariaLabel ??
        intl.formatMessage({
          id: "header.backToScandicHotelsCom",
          defaultMessage: "Back to scandichotels.com",
        })
      }
      {...props}
    >
      <ScandicLogoIcon
        className={cx(styles.logoIcon, {
          [styles.inverted]: isInverted,
        })}
        width="103px"
        height="22px"
      />
    </NextLink>
  )
}