"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 useLang from "@/hooks/useLang"

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

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

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

  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>
            <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>
    </>
  )
}