web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx

import { ArrowLeft } from "react-feather"

import { overview as profileOverview } from "@/constants/routes/myPages"

import Image from "@/components/Image"
import { ProtectedLayout } from "@/components/ProtectedLayout"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg"

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

import type { PropsWithChildren } from "react"

import type { LangParams, LayoutArgs } from "@/types/params"

export default async function SasXScandicLayout({
  children,
  params,
}: PropsWithChildren<LayoutArgs<LangParams>>) {
  const intl = await getIntl()

  return (
    <div
      className={styles.layout}
      style={{ backgroundImage: `url(${background.src})` }}
    >
      <header className={styles.header}>
        {/* TODO should this link to my-pages sas page? */}
        <Link className={styles.backLink} href={profileOverview[params.lang]}>
          <ArrowLeft height={20} width={20} />
          <span className={styles.long}>
            {intl.formatMessage({ id: "Back to Scandichotels.com" })}
          </span>
          <span className={styles.short}>
            {intl.formatMessage({ id: "Back" })}
          </span>
        </Link>
        <MainMenuLogo />
      </header>
      <section className={styles.content}>{children}</section>
    </div>
  )
}

async function MainMenuLogo() {
  const intl = await getIntl()

  return <Logo alt={intl.formatMessage({ id: "Back to scandichotels.com" })} />
}

function Logo({ alt }: { alt: string }) {
  return (
    <Image
      alt={alt}
      className={styles.logo}
      height={22}
      src="/_static/img/scandic-logotype.svg"
      priority
      width={103}
    />
  )
}