import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import { faq, membershipTermsAndConditions } from "@/constants/currentWebHrefs"

import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
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: "FAQ" }),
    },
    {
      href: membershipTermsAndConditions[lang],
      text: intl.formatMessage({ id: "Membership terms and conditions" }),
    },
  ]

  return (
    <article className={styles.wrapper}>
      <Subtitle>{intl.formatMessage({ id: "Read more" })}</Subtitle>
      <div className={styles.links}>
        {links.map((link) => (
          <Link
            key={link.text}
            size="small"
            className={styles.link}
            color="burgundy"
            href={link.href}
          >
            <MaterialIcon
              icon="arrow_forward"
              color="CurrentColor"
              className={styles.icon}
              size={20}
            />
            {link.text}
          </Link>
        ))}
      </div>
    </article>
  )
}