import Link from "next/link";
import type { ReactNode } from "react";

import { PageShell } from "@/components/layout/page-shell";

export function DocArticle({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <PageShell
      title={title}
      description={description}
      backHref="/portal/docs"
      backLabel="Back to docs"
    >
      <article className="prose-measure max-w-2xl space-y-6 text-sm leading-relaxed text-muted-foreground">
        {children}
      </article>
      <p className="mt-10 text-sm">
        <Link
          href="/portal/docs"
          className="text-accent-hover hover:underline"
        >
          ← All docs
        </Link>
      </p>
    </PageShell>
  );
}

export function DocH2({ children }: { children: ReactNode }) {
  return (
    <h2 className="font-display text-lg font-semibold tracking-tight text-foreground">
      {children}
    </h2>
  );
}

export function DocP({ children }: { children: ReactNode }) {
  return <p className="text-muted-foreground">{children}</p>;
}

export function DocUl({ items }: { items: string[] }) {
  return (
    <ul className="list-disc space-y-2 pl-5 text-muted-foreground">
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}