"use client";

import Image, { StaticImageData } from "next/image";

import Breadcrumbs from "@/components/common/breadcrumbs";

type HeroProps = {
  title: string;
  description: string;
  image: StaticImageData;
  imageAlt: string;
};

function Hero({ title, description, image, imageAlt }: HeroProps) {
  return (
    <section className="flex flex-col lg:flex-row min-h-screen">
      <div className="w-full lg:w-1/2 flex flex-col justify-center p-8 lg:p-16 space-y-4">
        <Breadcrumbs />
        <h1 className="text-5xl md:text-7xl font-black font-inter relative">
          {title}
        </h1>
        <p className="font-noto text-xl pt-4 text-gray-800 dark:text-gray-200 font-medium">
          {description}
        </p>
      </div>
      <div className="w-full lg:w-1/2">
        <Image
          alt={imageAlt}
          className="object-cover rounded-none min-h-screen"
          loading="eager"
          src={image}
        />
      </div>
    </section>
  );
}

export default Hero;