import Link from 'next/link';
import { categoryService } from '@/lib/services/category.service';

export const dynamic = 'force-dynamic';

export default async function CategoriesPage() {
  const categories = await categoryService.listActive();
  return (
    <div className="mx-auto max-w-5xl">
      <h1 className="mb-1 text-xl font-semibold text-gray-900">Product Categories</h1>
      <p className="mb-6 text-sm text-gray-500">
        Pick a category to view existing questions or post a new one.
      </p>
      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
        {categories.map((cat) => (
          <Link
            key={cat.id}
            href={`/categories/${cat.slug}`}
            className="card flex h-28 flex-col justify-between p-5 transition hover:border-brand-300 hover:shadow"
          >
            <h2 className="text-base font-semibold text-gray-900">{cat.name}</h2>
            <span className="text-xs text-brand-700">View questions →</span>
          </Link>
        ))}
      </div>
    </div>
  );
}