// @design-system: layout/Section
/**
 * Section - semantic <section> wrapper with optional heading and token padding.
 *
 * @example
 * <Section heading={t('hot_deals')} py="6" px="4">
 *   <ScrollRow>...</ScrollRow>
 * </Section>
 */

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

type SpacingKey = '0' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12';

const pyMap: Record<SpacingKey, string> = {
  '0': 'py-0',
  '2': 'py-2',
  '3': 'py-3',
  '4': 'py-4',
  '5': 'py-5',
  '6': 'py-6',
  '8': 'py-8',
  '10': 'py-10',
  '12': 'py-12',
};

const pxMap: Record<SpacingKey, string> = {
  '0': 'px-0',
  '2': 'px-2',
  '3': 'px-3',
  '4': 'px-4',
  '5': 'px-5',
  '6': 'px-6',
  '8': 'px-8',
  '10': 'px-10',
  '12': 'px-12',
};

export interface SectionProps {
  children: ReactNode;
  /** Optional visible heading text. Rendered as <h2>. */
  heading?: string;
  /** Block (vertical) padding from token scale. */
  py?: SpacingKey;
  /** Inline (horizontal) padding from token scale. */
  px?: SpacingKey;
  /** Accessible label for screen readers when heading is not provided. */
  'aria-label'?: string;
  /** When true, renders the heading in uppercase with wide letter-spacing. */
  uppercase?: boolean;
  /** Optional DOM id for in-page anchors / scroll targets. */
  id?: string;
  className?: string;
}

export function Section({
  children,
  heading,
  py = '4',
  px = '0',
  'aria-label': ariaLabel,
  uppercase = false,
  id,
  className,
}: SectionProps) {
  // Only indent the heading when the section itself has no horizontal padding.
  const headingPx = px === '0' ? 'px-4' : '';

  return (
    <section
      id={id}
      aria-label={ariaLabel ?? heading}
      className={cn(pyMap[py], pxMap[px], className)}
    >
      {heading && (
        <h2
          className={cn(
            'text-text-primary mb-3 text-base leading-[var(--line-height-tight)] font-bold',
            headingPx,
            uppercase && 'text-sm font-semibold tracking-wide uppercase',
          )}
        >
          {heading}
        </h2>
      )}
      {children}
    </section>
  );
}