import { ArrowLeft } from "react-feather"

import { overview as profileOverview } from "@scandic-hotels/common/constants/routes/myPages"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/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(
  props: PropsWithChildren<LayoutArgs<LangParams>>
) {
  const params = await props.params

  const { children } = props

  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: "header.backToScandicHotelsCom",
              defaultMessage: "Back to scandichotels.com",
            })}
          </span>
          <span className={styles.short}>
            {intl.formatMessage({
              id: "common.back",
              defaultMessage: "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: "header.backToScandicHotelsCom",
        defaultMessage: "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}
    />
  )
}