"use client";

import Container from "@/components/elements/Container";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import PageTitle from "@/components/settings/PageTitle";
import Header from "@/components/main/Header";
import TabNavigation from "@/components/TabNavigation";
import ShopProductGrid from "@/components/shops/ShopProductGrid";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { IShopProductListing } from "@/types/types";
import { useTranslation } from "react-i18next";

export default function ShopDiscoverPage() {
  const { t } = useTranslation("common");

  const { data, isLoading } = useInfiniteScroll({
    endpoint: "/shop-products/discover",
    queryKey: ["shop-products-discover"],
  });

  const listings: IShopProductListing[] =
    data?.pages.flatMap((page) => page.docs || []) || [];

  return (
    <>
      <Header />
      <LocalePageShell>
        <Container className="pb-28">
          <PageTitle>{t("shops.discoverTitle")}</PageTitle>
          <ShopProductGrid
            listings={listings}
            isLoading={isLoading}
            getHref={(listing) => `/shops/discover/reel/${listing._id}`}
          />
        </Container>
      </LocalePageShell>
      <TabNavigation currentPage="/shops/discover" />
    </>
  );
}
