web/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx

"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

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

import ButtonLink from "@/components/ButtonLink"
import Modal from "@/components/Modal"
import useWakeLock from "@/hooks/useWakeLock"

import DigitalTeamMemberCardContent from "./Content"

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

import type { User } from "@scandic-hotels/trpc/types/user"

interface DigitalTeamMemberCardClientProps {
  user: User
}

export default function DigitalTeamMemberCardClient({
  user,
}: DigitalTeamMemberCardClientProps) {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)

  const { release, request } = useWakeLock({
    reacquireOnPageVisible: true,
  })

  function onToggle(modalState: boolean) {
    setIsOpen(modalState)
    if (modalState) {
      request()
    } else {
      release()
    }
  }

  return (
    <>
      <Button
        className={styles.button}
        onPress={() => onToggle(true)}
        variant="Tertiary"
        typography="Body/Paragraph/mdBold"
      >
        <span className={styles.text}>
          {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
          <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
          {intl.formatMessage({
            defaultMessage: "Show Team Member Card",
          })}
        </span>
      </Button>
      <Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
        <Typography variant="Title/xs">
          <h2 className={styles.title}>
            {intl.formatMessage({ defaultMessage: "Scandic Family" })}
          </h2>
        </Typography>

        <DigitalTeamMemberCardContent user={user} />

        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.footer}>
            {intl.formatMessage({
              defaultMessage:
                "Book discounted stays for yourself, family and friends!",
            })}
          </p>
        </Typography>
        <ButtonLink
          href="https://scandic.fuseuniversal.com/topics/73727"
          target="_blank"
          variant="Tertiary"
          typography="Body/Supporting text (caption)/smBold"
        >
          <span className={styles.link}>
            {intl.formatMessage({
              defaultMessage: "Check out all your benefits",
            })}
            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
          </span>
        </ButtonLink>
      </Modal>
    </>
  )
}