import * as React from 'react';
import { clsx } from 'clsx';

export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
  title?: React.ReactNode;
  description?: React.ReactNode;
  actions?: React.ReactNode;
  density?: 'compact' | 'normal' | 'spacious';
}

const densityClass: Record<NonNullable<SectionProps['density']>, string> = {
  compact: 'gap-3',
  normal: 'gap-4',
  spacious: 'gap-6',
};

export function Section({
  title,
  description,
  actions,
  density = 'normal',
  className,
  children,
  ...props
}: SectionProps) {
  return (
    <section className={clsx('grid min-w-0', densityClass[density], className)} {...props}>
      {(title || description || actions) && (
        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            {title && (
              <h2 className="m-0 text-base font-semibold leading-6 text-[var(--bl-text-primary)]">
                {title}
              </h2>
            )}
            {description && (
              <p className="mt-1 max-w-3xl text-sm leading-6 text-[var(--bl-text-secondary)]">
                {description}
              </p>
            )}
          </div>
          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
        </div>
      )}
      {children}
    </section>
  );
}