"use client";

import ShopReelsView from "@/components/shops/ShopReelsView";
import PageLoader from "@/components/ui/PageLoader";
import useAxios from "@/hooks/useAxios";
import { IShopProductListing } from "@/types/types";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function ShopDiscoverReelPage() {
  const params = useParams<{ listingId: string }>();
  const { request } = useAxios();
  const [listings, setListings] = useState<IShopProductListing[] | null>(null);

  useEffect(() => {
    request<{ docs: IShopProductListing[] }>(
      "GET",
      "/shop-products/discover?limit=100"
    )
      .then((res) => setListings(res?.docs || []))
      .catch(() => setListings([]));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (listings === null) {
    return <PageLoader className="min-h-[100dvh] bg-black" />;
  }

  return (
    <ShopReelsView
      listings={listings}
      initialListingId={params.listingId}
      backHref="/shops/discover"
    />
  );
}
