import React from "react"

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

import { linkEmployment } from "@/constants/routes/dtmc"
import { login } from "@/constants/routes/handleAuth"
import { signup } from "@/constants/routes/signup"

import { auth } from "@/auth"
import ButtonLink from "@/components/ButtonLink"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isValidSession } from "@/utils/session"

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

export default async function EmployeeBenefitsCallToActions() {
  const session = await auth()
  const intl = await getIntl()
  const lang = await getLang()

  if (!isValidSession(session)) {
    return (
      <>
        <div className={styles.container}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Already a Scandic Friends account?",
              })}
            </p>
          </Typography>
          <ButtonLink href={login[lang]} size="Medium" variant="Tertiary">
            {intl.formatMessage({
              defaultMessage: "Log in and link employment",
            })}
          </ButtonLink>
        </div>

        <div className={styles.container}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Don't have a Scandic Friends account yet?",
              })}
            </p>
          </Typography>
          <ButtonLink href={signup[lang]} size="Medium" variant="Secondary">
            {intl.formatMessage({
              defaultMessage: "Sign up and link employment",
            })}
          </ButtonLink>
        </div>
      </>
    )
  }

  // -- TODO [LOY-196] --
  // Handle case of authed user and already connected work account.
  // Show member card modal.

  return (
    <div className={styles.container}>
      <ButtonLink
        href={linkEmployment[lang]}
        size="Medium"
        variant="Tertiary"
        color="Primary"
      >
        {intl.formatMessage({
          defaultMessage: "Link Employment",
        })}
      </ButtonLink>
    </div>
  )
}