import type { HTMLAttributes, ReactNode } from 'react';
import styles from './LayoutPrimitives.module.css';

type ContainerWidth = 'wide' | 'content' | 'reading' | 'full';
type Gap = 'small' | 'medium' | 'large';
type SectionTone = 'default' | 'muted' | 'strong';

function classes(...values: Array<string | false | undefined>): string {
  return values.filter(Boolean).join(' ');
}

export function Container({
  children,
  width = 'wide',
  className,
  ...props
}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; width?: ContainerWidth }) {
  return (
    <div className={classes(styles.container, styles[width], className)} {...props}>
      {children}
    </div>
  );
}

export function Section({
  children,
  tone = 'default',
  className,
  ...props
}: HTMLAttributes<HTMLElement> & { children: ReactNode; tone?: SectionTone }) {
  return (
    <section
      className={classes(
        styles.section,
        tone === 'muted' && styles.sectionMuted,
        tone === 'strong' && styles.sectionStrong,
        className,
      )}
      {...props}
    >
      {children}
    </section>
  );
}

export function Stack({
  children,
  gap = 'medium',
  className,
  ...props
}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; gap?: Gap }) {
  const gapClass = {
    small: styles.stackSmall,
    medium: styles.stackMedium,
    large: styles.stackLarge,
  }[gap];
  return (
    <div className={classes(styles.stack, gapClass, className)} {...props}>
      {children}
    </div>
  );
}

export function Cluster({
  children,
  gap = 'medium',
  className,
  ...props
}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; gap?: Gap }) {
  const gapClass = {
    small: styles.clusterSmall,
    medium: styles.clusterMedium,
    large: styles.clusterLarge,
  }[gap];
  return (
    <div className={classes(styles.cluster, gapClass, className)} {...props}>
      {children}
    </div>
  );
}

export function ResponsiveGrid({
  children,
  className,
  ...props
}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
  return (
    <div className={classes(styles.grid, className)} {...props}>
      {children}
    </div>
  );
}
