import type { HTMLAttributes, ReactNode } from 'react';
import { cx } from '../_internal/cx';

export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  /** Big centered statement headline (`.kwac-statement`), e.g. "1.800 kg. Zieht, was Sie vorhaben." Omit for image-only bands. */
  statement?: ReactNode;
  /** One muted paragraph under the statement (`.kwac-band-copy`), max ~640px wide. */
  copy?: ReactNode;
  /** `alt` paints the light-gray band background (`.kwac-band-alt`). Alternate white and alt down the page. */
  alt?: boolean;
  /** `final` adds the extra vertical padding of the closing call-to-action band (`.kwac-final`). */
  final?: boolean;
  /** Content below the copy: grids, tables, cards, `CtaActions`. */
  children?: ReactNode;
}

/**
 * Full-width content band (`.kwac-band`) with 96px vertical padding, centered
 * statement headline and optional copy. Every section of the listing below the
 * hero is one `Section`; alternate `alt` on and off so neighbouring bands are
 * distinguishable. Pass an `id` to make it an anchor target (the headline gets
 * `${id}-title` and the section is labelled by it).
 */
export function Section({ statement, copy, alt = false, final = false, id, className, children, ...rest }: SectionProps) {
  const titleId = id && statement ? `${id}-title` : undefined;
  return (
    <section
      id={id}
      className={cx('kwac-band', alt && 'kwac-band-alt', final && 'kwac-final', className)}
      aria-labelledby={titleId}
      {...rest}
    >
      {statement ? (
        <h2 className="kwac-statement" id={titleId}>
          {statement}
        </h2>
      ) : null}
      {copy ? <p className="kwac-band-copy">{copy}</p> : null}
      {children}
    </section>
  );
}