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

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

import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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}>
      <Subtitle>{title}</Subtitle>
      <ButtonRAC className={styles.close} onPress={handleClose}>
        <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
      </ButtonRAC>
      {children}
    </header>
  )
}