/**
 * SectionShell - common wrapper for every numbered design-system section.
 *
 * Pure presentational, tokens-only.
 */

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

export interface SectionShellProps {
  /** DOM id used as the TOC anchor target. */
  id: string;
  /** Section title (e.g. "1. Tokens"). */
  title: string;
  /** Short description shown under the title. */
  description?: string;
  /** Section content. */
  children: ReactNode;
  /** Additional class names. */
  className?: string;
}

export function SectionShell({ id, title, description, children, className }: SectionShellProps) {
  return (
    <section
      id={id}
      aria-labelledby={`${id}-title`}
      className={cn('flex flex-col gap-6', 'scroll-mt-16', className)}
    >
      <header className="flex flex-col gap-2">
        <h2
          id={`${id}-title`}
          className="text-text-primary text-2xl font-bold leading-[var(--line-height-tight)]"
        >
          {title}
        </h2>
        {description && (
          <p className="text-text-secondary text-base leading-[var(--line-height-normal)]">
            {description}
          </p>
        )}
      </header>
      <div className="flex flex-col gap-5">{children}</div>
    </section>
  );
}