import React, { ReactNode } from "react";

import { Image } from "@/components/Image";

import styles from "./Header.module.css";

export interface Props {
  title: string;
  image: string;
  children: ReactNode;
}

export function Header({ title, image, children }: Props) {
  return (
    <main className={styles.page}>
      <header className={styles.headerContainer}>
        <Image src={image} className={styles.headerImage} />
        <h1 className={styles.header}>{title}</h1>
      </header>
      {children}
    </main>
  );
}