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()
  const currentYear = new Date().getFullYear()

  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(
              {
                id: "footer.copyright",
                defaultMessage:
                  "© {currentYear} Scandic Hotels all rights reserved",
              },
              { currentYear }
            )}
          </p>
        </Typography>
      </div>
    </div>
  )
}