"use client"

import { useIntl } from "react-intl"

import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { LoginButton } from "@scandic-hotels/design-system/LoginButton"

import useLang from "@/hooks/useLang"
import { trackLoginClick } from "@/utils/tracking"

export function LoyaltyLoginButton() {
  const intl = useIntl()
  const lang = useLang()
  const loginPathname = useLazyPathname()

  return (
    <LoginButton
      lang={lang}
      onClick={() => {
        trackLoginClick("join scandic friends sidebar")
      }}
      redirectTo={loginPathname}
      loginPosition="scandic-friends-sidebar"
      variant="Text"
      typography="Body/Supporting text (caption)/smBold"
      wrapping={false}
    >
      <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
      <span>
        {intl.formatMessage({
          id: "loyalty.loginButton",
          defaultMessage: "Log in here",
        })}
      </span>
    </LoginButton>
  )
}