'use client';

import Breadcrumb from './Breadcrumb';
import ProductGallery from './ProductGallery';
import ProductInfo from './ProductInfo';
import type { Product } from '../products/product.types';

interface ProductHeroProps {
  product: Product;
  baseUrl: string;
}

export default function ProductHero({ product, baseUrl }: ProductHeroProps) {
  return (
    <section className="pt-10 pb-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">

        <Breadcrumb
          baseUrl={baseUrl}
          title={product.title}
          categoryName={
            product.subCategory && product.subCategory !== '-'
              ? product.subCategory
              : product.categoryName && product.categoryName !== '-'
              ? product.categoryName
              : product.category
          }
        />

        <div className="mt-10 grid grid-cols-1 gap-y-20 gap-x-4 lg:grid-cols-2">
          <ProductGallery
            image={product.image}
            images={product.images}
            title={product.title}
          />
          <ProductInfo product={product} />
        </div>

      </div>
    </section>
  );
}