import { Carousel } from "@/components/ui/Carousel";
import { ProductCard } from "@/components/ui/ProductCard";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { EmptyState } from "@/components/ui/EmptyState";
import { productHref, type ProductGroup } from "@/lib/meshkee";

export function BrandGroupCarousels({
  brandGroups,
  contactPhone,
}: {
  brandGroups: ProductGroup[];
  contactPhone?: string;
}) {
  if (brandGroups.length === 0) {
    return (
      <section className="py-10 md:py-14">
        <div className="mx-auto max-w-7xl px-4">
          <SectionTitle title="محصولات برندها" enTitle="Brand Collections" />
          <EmptyState message="هنوز محصولی برای برندها ثبت نشده است." />
        </div>
      </section>
    );
  }

  return (
    <>
      {brandGroups.map((group) => (
        <section key={group.id} className="py-10 md:py-14">
          <div className="mx-auto max-w-7xl px-4">
            <SectionTitle title={group.title} enTitle={group.title} action="مشاهده همه" />
            <Carousel ariaLabel={`کاروسل ${group.title}`}>
              {group.items.map((product) => (
                <ProductCard
                  key={product.id}
                  name={product.name}
                  brand={product.brand ?? ""}
                  price={product.price}
                  oldPrice={product.oldPrice}
                  discount={product.discount}
                  image={product.image ?? "/images/placeholder.svg"}
                  variant="brand"
                  href={productHref(product)}
                  contactPhone={contactPhone}
                  variantId={product.variantId}
                  slug={product.slug}
                />
              ))}
            </Carousel>
          </div>
        </section>
      ))}
    </>
  );
}