import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Map } from "lucide-react";

export default async function ApiMapPage({
  params,
}: {
  params: { projectId: string };
}) {
  return (
    <div className="flex h-full flex-col">
      {/* Page Header */}
      <div className="border-b bg-card/50 px-6 py-4">
        <div>
          <h1 className="text-2xl font-bold">API Map</h1>
          <p className="text-sm text-muted-foreground">
            Auto-generated API endpoint documentation
          </p>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-6">
        <div className="mx-auto max-w-6xl">
          <Card>
            <CardHeader>
              <CardTitle>API Endpoints</CardTitle>
              <CardDescription>
                Automatically detected from your codebase
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {/* Example endpoints */}
                {[
                  { method: "GET", path: "/api/sessions", desc: "List all sessions" },
                  { method: "POST", path: "/api/sessions", desc: "Create new session" },
                  { method: "GET", path: "/api/features", desc: "List features" },
                ].map((endpoint, i) => (
                  <div
                    key={i}
                    className="flex items-center justify-between rounded-lg border p-4"
                  >
                    <div className="flex items-center gap-4">
                      <Badge
                        variant={endpoint.method === "GET" ? "outline" : "default"}
                        className="font-mono"
                      >
                        {endpoint.method}
                      </Badge>
                      <div>
                        <code className="text-sm font-mono">{endpoint.path}</code>
                        <p className="text-sm text-muted-foreground">
                          {endpoint.desc}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}