import { getPattern, getQuestions } from "@/lib/api";
import { QuestionCard } from "@/components/questions/question-card";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { notFound } from "next/navigation";

export default async function PatternDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  let pattern;
  let questions;
  try {
    [pattern, questions] = await Promise.all([
      getPattern(slug),
      getQuestions({ pattern: slug, limit: 50 }),
    ]);
  } catch {
    notFound();
  }

  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <div>
        <h1 className="text-3xl font-bold mb-2">{pattern.name}</h1>
        <p className="text-[var(--muted-foreground)]">
          {pattern.question_count} questions using this pattern
        </p>
      </div>

      {pattern.description && (
        <Card>
          <CardHeader>
            <CardTitle>Description</CardTitle>
          </CardHeader>
          <CardContent>{pattern.description}</CardContent>
        </Card>
      )}

      {pattern.when_to_use && (
        <Card>
          <CardHeader>
            <CardTitle>When to Use</CardTitle>
          </CardHeader>
          <CardContent className="whitespace-pre-wrap">
            {pattern.when_to_use}
          </CardContent>
        </Card>
      )}

      <div className="space-y-4">
        <h2 className="text-xl font-semibold">Questions</h2>
        <div className="grid gap-4">
          {questions.items.map((question) => (
            <QuestionCard key={question.id} question={question} />
          ))}
        </div>
      </div>
    </div>
  );
}
