import { Section } from "@/components/ui/section"
import ImageLoader from "@/lib/utils/ImageLoader"
import { Media } from "@/payload-types"

export const AboutHero = ({ title, subtitle, bg }: { title: string, subtitle: string, bg: string | Media }) => {
  return (
    <div className="relative h-screen w-screen">
      <ImageLoader
        media={bg}
        alt="Background"
        className="absolute inset-0 w-full object-cover z-0 h-full"
      />
      <div className="absolute left-0 bottom-[-5px] w-screen h-[101%] bg-gradient-to-b from-transparent to-black" />

      <Section sectionClass="h-full pb-[80px] tablet:pb-[100px] xl:pb-[168px]" boxClass="h-full flex items-end">
        <div className="max-w-[796px] relative z-10">
          {title && <h1 className="mb-2 h4 tablet:h2 xl:h1 text-base-white">{title}</h1>}
          {subtitle && <p className="label-medium-regular tablet:b2-regular xl:b1-regular text-grey-100" dangerouslySetInnerHTML={{ __html: subtitle }}></p>}
        </div>
      </Section>
    </div>
  )
}