// @design-system: layout/SettingsSection
/**
 * SettingsSection — settings page section block with scrollable anchor target.
 *
 * Renders an `<section>` with a sticky heading and body content.
 * Works with `SettingsNav` anchors — set matching `id` props.
 *
 * Tokens: `--color-surface-raised`, `--color-border`, `--color-text-*`
 */

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

export interface SettingsSectionProps {
  /** Anchor ID — must match the `id` in SettingsNav sections. */
  id: string;
  /** Section heading text. */
  title: string;
  /** Optional heading sub-text. */
  description?: string;
  /** Section body content. */
  children: ReactNode;
  /** Extra class names. */
  className?: string;
}

/**
 * SettingsSection
 *
 * Tokens: `--color-surface-raised`, `--color-border`, `--color-text-primary/secondary`
 */
export function SettingsSection({
  id,
  title,
  description,
  children,
  className,
}: SettingsSectionProps) {
  return (
    <section
      id={id}
      aria-labelledby={`${id}-heading`}
      className={cn(
        'flex flex-col gap-4 pb-8',
        'scroll-mt-20', // offset for sticky topbar
        className,
      )}
    >
      <div className="border-border border-b pb-3">
        <h2 id={`${id}-heading`} className="text-text-primary text-base font-semibold">
          {title}
        </h2>
        {description && <p className="text-text-secondary mt-1 text-sm">{description}</p>}
      </div>
      <div>{children}</div>
    </section>
  );
}