// Ask question page. The shell is a server component that loads the
// active categories list. The form itself is a client component below
// because it handles file uploads and state.

import { categoryService } from '@/lib/services/category.service';
import { AskQuestionForm } from './AskQuestionForm';

export const dynamic = 'force-dynamic';

export default async function AskQuestionPage({
  searchParams,
}: {
  searchParams: { category?: string };
}) {
  const categories = await categoryService.listActive();
  const preselected = searchParams.category ? Number(searchParams.category) : undefined;

  return (
    <div className="mx-auto max-w-2xl">
      <h1 className="mb-1 text-xl font-semibold text-gray-900">Ask a question</h1>
      <p className="mb-6 text-sm text-gray-500">
        Provide enough detail so a teammate can help quickly. Search first if a similar issue may already be solved.
      </p>
      <AskQuestionForm
        categories={categories.map((c) => ({ id: c.id, name: c.name }))}
        defaultCategoryId={preselected}
      />
    </div>
  );
}