import Image from "next/image";
import Link from "next/link";
import { LIST_PAGE_META } from "@/data/products";

type Crumb = { label: string; href?: string };

type ProductDetailHeroProps = {
  heroImage?: string;
  breadcrumbs: readonly Crumb[];
};

/** Shorter list-style title band — home hero image, breadcrumbs only. */
export default function ProductDetailHero({
  heroImage = LIST_PAGE_META.heroImage,
  breadcrumbs,
}: ProductDetailHeroProps) {
  return (
    <section className="relative h-[min(28vw,220px)] min-h-[140px] w-full overflow-hidden bg-[#ebe6df] sm:min-h-[160px]">
      <Image
        src={heroImage}
        alt=""
        fill
        priority
        sizes="100vw"
        className="object-cover object-[center_20%]"
      />
      <div className="absolute inset-0 bg-gradient-to-l from-white/20 via-transparent to-transparent" />

      <div className="absolute inset-x-0 bottom-4 z-10 px-4 sm:bottom-5 sm:px-6 lg:bottom-6 lg:px-[120px]">
        <nav
          dir="rtl"
          aria-label="مسیر صفحه"
          className="flex flex-wrap items-center gap-1.5 text-[11px] font-light text-ink sm:text-[13px]"
        >
          {breadcrumbs.map((crumb, i) => (
            <span
              key={`${crumb.label}-${i}`}
              className="inline-flex items-center gap-1.5 sm:gap-2"
            >
              {i > 0 ? (
                <Image
                  src="/images/home/icons/caret-left-dark.svg"
                  alt=""
                  width={12}
                  height={12}
                  unoptimized
                />
              ) : null}
              {crumb.href ? (
                <Link href={crumb.href} className="transition-opacity hover:opacity-70">
                  {crumb.label}
                </Link>
              ) : (
                <span>{crumb.label}</span>
              )}
            </span>
          ))}
        </nav>
      </div>
    </section>
  );
}