export const dynamic = "force-dynamic";

import type { Metadata } from "next";
import Link from "next/link";
import { BookOpen, ChevronRight } from "lucide-react";
import { DOCS } from "@/lib/docs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const metadata: Metadata = { title: "Docs" };

export default function DocsIndexPage() {
  return (
    <div className="flex flex-col gap-4">
      <h1 className="font-heading text-2xl font-semibold tracking-tight">
        Docs
      </h1>
      <div className="grid gap-3 sm:grid-cols-2">
        {DOCS.map((doc) => (
          <Link key={doc.slug} href={`/docs/${doc.slug}`}>
            <Card className="hover:border-primary/50 h-full transition-colors">
              <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
                <div className="flex items-center gap-2">
                  <BookOpen className="text-muted-foreground size-4.5 shrink-0" />
                  <CardTitle className="text-base">{doc.title}</CardTitle>
                </div>
                <ChevronRight className="text-muted-foreground size-4 shrink-0" />
              </CardHeader>
              <CardContent className="text-muted-foreground text-sm">
                {doc.description}
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}