import type { ReactNode } from 'react'

/**
 * The accent-bar + uppercase label used throughout the detail surfaces.
 * Use `SectionLabel` standalone when the caller already wraps content in
 * its own `<section>` or div; use `Section` for the common case of "label
 * above a block".
 */
export function SectionLabel({ children }: { children: ReactNode }) {
  return (
    <div className="flex items-center gap-2">
      <span className="w-1 h-3.5 rounded-full bg-accent" />
      <h3 className="text-[11px] font-semibold text-text-2 uppercase tracking-[0.14em]">{children}</h3>
    </div>
  )
}

export function Section({
  label,
  children,
  id,
}: {
  label: string
  children: ReactNode
  /** Optional dom id so the section-tabs strip can target it for
   *  smooth-scroll. Omit when the section isn't part of the tabbed
   *  table of contents. */
  id?: string
}) {
  return (
    <section id={id} className="scroll-mt-4">
      {label && (
        <div className="mb-3">
          <SectionLabel>{label}</SectionLabel>
        </div>
      )}
      {children}
    </section>
  )
}
