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

"use client"

import { useIntl } from "react-intl"

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

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
  children: React.ReactElement
}

export default function DigitalTeamMemberCardClient({
  user,
  children,
}: DigitalTeamMemberCardClientProps) {
  const intl = useIntl()

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

  function onOpenChange(isOpen: boolean) {
    if (isOpen) {
      request() // Acquire wake lock when modal opens
    } else {
      release() // Release wake lock when modal closes
    }
  }

  return (
    <Modal
      trigger={children}
      className={styles.modal}
      onOpenChange={onOpenChange}
    >
      <DigitalTeamMemberCardContent user={user} />

      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.footer}>
          {intl.formatMessage({
            id: "myPages.bookDiscountedStaysForSelfFamilyAndFriends",
            defaultMessage:
              "Book discounted stays for yourself, family and friends!",
          })}
        </p>
      </Typography>
    </Modal>
  )
}