import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"

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

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

export async function Footer() {
  const intl = await getIntl()

  return (
    <div className={styles.root}>
      <div className={styles.top}>
        <div>
          <Image
            alt="SAS logotype"
            className={styles.sasLogo}
            src="/_static/img/sas-logotype.svg"
            height={32}
            width={90}
            sizes="100vw"
          />
          <PoweredByScandic />
        </div>
        <FooterMenu />
      </div>
      <div className={styles.bottom}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage({
              defaultMessage: "© 2025 Scandic Hotels all rights reserved.",
            })}
          </p>
        </Typography>
      </div>
    </div>
  )
}