import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Title } from '@/components/Title/Title'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { TextDiv } from '@/components/Text/TextDiv'
import Image from 'next/image'
import { StaticImageData } from 'next/image'
import styles from "./styles.module.scss"

type PageHeaderProps = {
  title: string,
  description: string,
  image?: StaticImageData
  alt?: string
}

export const PageHeader = ({ title, description, image, alt }: PageHeaderProps) => {
  return (
    <Section paddingBottom={"small"}>
      <Container>
        <Title title={title} />
        <strong>
          <TextDiv text={description} />
        </strong>
      </Container>

      <HR />

      <Container>
        {image &&
          <Image
            unoptimized={true}
            className={styles.image}
            src={image}
            alt={alt || ""}
          />
        }
      </Container>

    </Section>
  )
}