parsshop/app/category/page.tsx

// src/app/categories/page.tsx
import { categoryService } from '@/public/src/services/categories/api';
import Link from 'next/link';

export default async function CategoriesPage() {
  // دریافت داده‌ها در سمت سرور (بدون هیچ هوک یا لودینگی در سمت کلاینت)
  // به دلیل تنظیمات revalidate، این درخواست بسیار سریع (از کش) خوانده می‌شود
  const categories = await categoryService.getCategories();

  // گرفتن دسته‌بندی‌های اصلی (آن‌هایی که والد ندارند)
  const rootCategories = categories.filter((cat) => cat.parent === null);

  return (
    <main className="p-4">
      <h1 className="text-2xl font-bold mb-4">دسته‌بندی محصولات</h1>
      
      <ul className="space-y-2">
        {rootCategories.map((category) => (
          <li key={category.id} className="border p-3 rounded-md">
            <Link href={`/category/${category.slug}`}>
              <strong className="text-blue-600">{category.name}</strong>
            </Link>
            
            {/* نمایش زیرمجموعه‌ها در صورت وجود */}
            {category.children.length > 0 && (
              <ul className="pr-4 mt-2 list-disc text-sm text-gray-600">
                {category.children.map((child) => (
                  <li key={child.id}>{child.name}</li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
    </main>
  );
}