import type { ReactNode } from 'react'

export default function PageCover({
  image,
  title,
  subtitle,
  center,
}: {
  image: string
  title: string
  subtitle?: ReactNode
  center?: boolean
}) {
  return (
    <section
      className="site-blocks-cover inner-page-cover"
      style={{
        backgroundImage: `url('${image}')`,
        ...(center ? { backgroundPosition: 'center' } : null),
      }}
    >
      <div className="container cover-inner">
        <div className="banner-h1">
          <h1 className="text-white">{title}</h1>
          {subtitle}
        </div>
      </div>
    </section>
  )
}