import Image from "next/image";

type HeroImageProps = {
  title?: string;
  imgSrc?: string;
};

export default function HeroImage({ title = "", imgSrc = "/images/breadcrumbs-bg-05-1922x441.jpg" }: HeroImageProps) {
  return (
    <section className="breadcrumbs-custom bg-image context-dark">
      <Image
        alt="Blog"
        src={imgSrc}
        quality={100}
        fill
        sizes="100vw"
        style={{
          objectFit: "cover",
        }}
      />
      <div className="bg-colorHeroOverlay/50 w-full h-full absolute top-0 left-0" />
      <div className="container relative">
        <h2 className="breadcrumbs-custom-title">{title}</h2>
      </div>
    </section>
  );
}