"use client";

import Link from "next/link";
import { MainHeader } from "@/components/layout/main-header";
import { CategoryCard } from "@/components/shared/category-card";
import { MainFooter } from "@/components/shared/main-footer";
import { EmptyState } from "@/components/ui/empty-state";
import { SectionHeader } from "@/components/ui/section-header";
import { Skeleton } from "@/components/ui/skeleton";
import { useCategoriesQuery } from "@/hooks/queries/api-hooks";

export default function CategoriesPage() {
  const categoriesQuery = useCategoriesQuery({ per_page: 60 });

  return (
    <div>
      <MainHeader />
      <main className="container-shell section-space">
        <SectionHeader title="كل الأقسام" subtitle="تصفح العروض حسب الفئة المناسبة لك" />

        {categoriesQuery.isLoading ? (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-24" />)}
          </div>
        ) : categoriesQuery.data && categoriesQuery.data.items.length > 0 ? (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {categoriesQuery.data.items.map((category) => (
              <Link key={category.id} href={`/categories/${category.slug}`}>
                <CategoryCard category={category} />
              </Link>
            ))}
          </div>
        ) : (
          <EmptyState title="لا توجد أقسام" description="سيتم إضافة الأقسام قريبًا." />
        )}
      </main>
      <MainFooter />
    </div>
  );
}