Artifacts

import { notFound } from "next/navigation";
import { Calendar, User } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { Markdown } from "@/components/shared/markdown";
import { SourceRef } from "@/components/shared/source-ref";
import { Card, CardContent } from "@/components/ui/card";
import { getReport } from "@/lib/content/reports";

export const dynamic = "force-dynamic";

export default function ReportDetailPage({ params }: { params: { id: string } }) {
  const report = getReport(params.id);
  if (!report) notFound();

  return (
    <div>
      <PageHeader
        eyebrow="Report"
        title={report.title}
        back={{ label: "Reports", href: "/reports" }}
      />

      <div className="mb-6 flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
        {report.date && (
          <span className="inline-flex items-center gap-1.5">
            <Calendar className="h-4 w-4" />
            {report.date}
          </span>
        )}
        {report.author && (
          <span className="inline-flex items-center gap-1.5">
            <User className="h-4 w-4" />
            {report.author}
          </span>
        )}
      </div>

      <Card>
        <CardContent className="p-8">
          <Markdown>{report.body}</Markdown>
        </CardContent>
      </Card>

      <div className="mt-8">
        <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
          Source
        </div>
        <SourceRef path={report.sourcePath} />
      </div>
    </div>
  );
}