import { scandicFriends } from "@scandic-hotels/common/constants/routes/customerService"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { faq } from "@/constants/webHrefs"

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

export default async function ReadMore() {
  const [intl, lang] = await Promise.all([getIntl(), getLang()])

  const links = [
    {
      href: faq[lang],
      text: intl.formatMessage({
        id: "common.faq",
        defaultMessage: "FAQ",
      }),
    },
    {
      href: scandicFriends[lang],
      text: intl.formatMessage({
        id: "loyalty.membershipTermsAndConditions",
        defaultMessage: "Membership terms and conditions",
      }),
    },
  ]

  return (
    <article className={styles.wrapper}>
      <Typography variant="Title/Subtitle/md">
        <p>
          {intl.formatMessage({
            id: "common.readMore",
            defaultMessage: "Read more",
          })}
        </p>
      </Typography>
      <div className={styles.links}>
        {links.map((link) => (
          <Link
            key={link.text}
            size="small"
            className={styles.link}
            href={link.href}
          >
            <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
            {link.text}
          </Link>
        ))}
      </div>
    </article>
  )
}