import type { ReactNode } from 'react';
import { CodeBlock } from './code-block';

export function DocsTitle({ children, kicker }: { children: ReactNode; kicker?: string }) {
  return (
    <header className="mb-6">
      {kicker && (
        <div className="mb-2 text-[11px] uppercase tracking-[0.16em] text-[--color-fg-subtle]">
          {kicker}
        </div>
      )}
      <h1 className="text-[28px] font-semibold leading-tight tracking-tight">{children}</h1>
    </header>
  );
}

export function DocsLead({ children }: { children: ReactNode }) {
  return <p className="mb-8 text-[15px] leading-relaxed text-[--color-fg-muted]">{children}</p>;
}

export function DocsH2({ children, id }: { children: ReactNode; id?: string }) {
  return (
    <h2 id={id} className="mt-10 mb-3 text-[18px] font-semibold tracking-tight">
      {children}
    </h2>
  );
}

export function DocsH3({ children }: { children: ReactNode }) {
  return <h3 className="mt-6 mb-2 text-[14px] font-semibold tracking-tight">{children}</h3>;
}

export function DocsP({ children }: { children: ReactNode }) {
  return <p className="mb-4 text-[13.5px] leading-relaxed text-[--color-fg]">{children}</p>;
}

export function DocsList({ children }: { children: ReactNode }) {
  return (
    <ul className="mb-4 space-y-1.5 pl-4 text-[13.5px] leading-relaxed text-[--color-fg]">
      {children}
    </ul>
  );
}

export function DocsLi({ children }: { children: ReactNode }) {
  return (
    <li className="relative pl-2 before:absolute before:left-[-12px] before:top-2 before:size-1 before:rounded-full before:bg-[--color-fg-subtle]">
      {children}
    </li>
  );
}

export function Mono({ children }: { children: ReactNode }) {
  return (
    <code className="mono rounded-sm bg-[--color-bg-subtle] px-1.5 py-0.5 text-[12.5px] text-[--color-fg]">
      {children}
    </code>
  );
}

export function DocsCode({
  label,
  code,
  language,
}: {
  label?: string;
  code: string;
  language?: string;
}) {
  return (
    <div className="my-4">
      <CodeBlock label={label} code={code} language={language} />
    </div>
  );
}