"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 { Typography } from "@scandic-hotels/design-system/Typography"

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}
      trackingId="loginJoinLoyalty"
    >
      <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
      <Typography variant={"Body/Paragraph/mdRegular"}>
        <span>
          {intl.formatMessage({
            defaultMessage: "Log in here",
          })}
        </span>
      </Typography>
    </LoginButton>
  )
}