web/apps/partner-sas/components/Header/Header.tsx

"use client"

import { useSession } from "next-auth/react"

import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/Link"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"

import useLang from "@/hooks/useLang"

import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"

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

export function Header() {
  const lang = useLang()
  const session = useSession()

  const {
    data: profileData,
    isLoading,
    isSuccess,
  } = trpc.partner.sas.getEuroBonusProfile.useQuery(undefined, {
    enabled: session.status === "authenticated",
  })

  return (
    <>
      <header className={styles.header}>
        <Image
          alt="SAS logotype"
          className={styles.logo}
          src="/_static/img/sas-logotype-white.svg"
          height={32}
          width={90}
          sizes="100vw"
        />
        {session.status === "loading" && (
          <SkeletonShimmer width={"12ch"} height={"1ch"} />
        )}
        {session.status === "unauthenticated" && (
          /** For some reason it complains about RSC-payload if using <Link /> */
          <a href={`/${lang}/login?redirectTo=${window?.location.href}`}>
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {"Login here"}
          </a>
        )}
        {session.status === "authenticated" && (
          <div>
            <Typography variant="Body/Supporting text (caption)/smBold">
              <span>
                {session.data?.user && <>{session.data.user.email}</>}
              </span>
            </Typography>
            {isLoading && <SkeletonShimmer width={"6ch"} height={"1ch"} />}
            {isSuccess && profileData && (
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {profileData.points.total} Points
                </span>
              </Typography>
            )}
            <Link color={"white"} href={`/${lang}/logout`} prefetch={false}>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {"Logout"}
            </Link>
          </div>
        )}
      </header>
      <div className={styles.poweredBy}>
        <PoweredByScandic />
      </div>
    </>
  )
}