web/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx

import { Button as ButtonRAC } from "react-aria-components"

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

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

interface HeaderProps extends React.PropsWithChildren {
  handleClose: () => void
  title: string
}

export default function Header({ children, handleClose, title }: HeaderProps) {
  return (
    <header className={styles.header}>
      <Typography variant="Title/Subtitle/lg">
        <p>{title}</p>
      </Typography>
      <ButtonRAC className={styles.close} onPress={handleClose}>
        <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
      </ButtonRAC>
      {children}
    </header>
  )
}