import type { ReactNode } from "react";
import type { RouteParams } from "@/core/types/common";
import type { StoreViewModel } from "@/core/types/dto";
import type { StoresQueryParams } from "@/app/(profile)/profile/(store)/_types";

import { getShops } from "@/app/(profile)/profile/(store)/_actions/shops";

import AssetListWrapper from "@/app/(profile)/profile/_components/_layout/card/list/wrapper";
import AssetCardLink from "@/app/(profile)/profile/_components/_layout/card/link/client";

interface Params {}

interface SearchParams extends StoresQueryParams {}
/**
 * The **Server page** has related Parallel slot {@link ShopsFilters} \
 * Here processes dynamic shop list data depends on the selected filters.\
 * All logic based on the **SSR** feature and there are few components in the parallel slot to help in that process.
 */
export default async function Shops(props: RouteParams<Params, SearchParams>): Promise<ReactNode> {
  const searchParams = await props.searchParams;
  const shops = await getShops(searchParams?.searchQuery, searchParams?.category);

  return (
    <div>
      <AssetListWrapper>
        {shops?.map((store) => (
          <AssetCardLink<StoreViewModel>
                         key={store._id}
                         href={`/profile/shops/${store._id}`}
                         asset={store}
                         size={5}
                         more={true}
                         ctx={"shop"}
                         description={`${
                           store?.address?.street || "Albany Street (Manhattan)"
                         }, ${store?.address?.city || "NY"}`}
                         className={"shadow-asset"}
                         imageUrl={`/images/shops/${store._id}.svg`}
                         title="name"/>
        ))}
      </AssetListWrapper>
    </div>
  );
}