import BlurImage from '@/components/shared/BlurImage'
import Container from '@/components/shared/Container'
import type { FeaturedImage } from '@/lib/types'

type Props = {
  featuredImage: FeaturedImage
  title: string
}

export default function GlossaryFaqHero({ featuredImage, title }: Props) {
  return (
    <>
      <div className="fixed inset-0 h-vh -z-1 bg-gray-light">
        {featuredImage && (
          <BlurImage
            src={featuredImage.node.imageUrl}
            alt={featuredImage.node.alt}
            placeholderSrc={featuredImage.node.placeholder}
            fill
            className="object-cover"
            sizes="100vw"
            priority
          />
        )}
      </div>

      <Container>
        <div className="sm:px-8 md:px-11 lg:px-16 flex items-end min-h-[calc(100vh_-_320px)]">
          <h1 className="text-h1 text-white lg:mb-[100px] md:mb-[80px] sm:mb-[50px] mb-[30px]">{title}</h1>
        </div>
      </Container>
    </>
  )
}