import Container from "@/components/elements/Container";
import InfiniteProjects from "@/components/projects/InfiniteProjects";
import ProjectsFilter from "@/components/projects/ProjectsFilter";
import { fetchProjects } from "@/api/fetchProjects";
import { cookies } from "next/headers";
import { Metadata } from "next";
import { pageSeo } from "@/config/pageSeo";
import { generatePageMetadata } from "@/utils/generatePageMetadata";

export const metadata: Metadata = generatePageMetadata({
  title: pageSeo.projects.title,
  description: pageSeo.projects.description,
  path: pageSeo.projects.path,
  keywords: [...pageSeo.projects.keywords],
});

type ProjectsPageProps = {
  searchParams: Promise<{
    expertise?: string;
    most_requests?: string;
    most_price?: string;
    age?: string;
    gender?: string;
  }>;
};

export default async function ProjectsPage({ searchParams }: ProjectsPageProps) {
  const filters = await searchParams;
  const cookieStore = await cookies();
  const token = cookieStore.get("token")?.value || "";

  const projectFilters = {
    expertise: filters.expertise || "",
    most_requests: filters.most_requests || "",
    most_price: filters.most_price || "",
    age: filters.age || "",
    gender: filters.gender || "",
  };

  const initialData = await fetchProjects(1, 10, projectFilters, token);

  return (
    <Container className="pb-28">
      <h1 className="sr-only">
        {pageSeo.projects.title.replace(" | مدستاگرام", "")}
      </h1>
      <ProjectsFilter expertise={filters.expertise || ""} />
      <InfiniteProjects
        initialData={initialData}
        filters={projectFilters}
        token={token}
      />
    </Container>
  );
}
