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 | string
  alt?: string
}

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

      <HR />

      <Container>
        {image && typeof image === 'string' ? (
          <Image
            unoptimized={false}
            className={styles.image}
            src={image}
            width={1100}
            height={400}
            alt={alt || ''}
          />
        ) : image ? (
          <Image
            unoptimized={false}
            className={styles.image}
            src={image}
            alt={alt || ''}
          />
        ) : null}
      </Container>

    </Section>
  )
}