import { Heading } from '#/components/atoms/heading.jsx';
import { cn } from '#/lib/utils.js';

/** A titled block inside a page: a heading, optional description and action. */
export function Section({ title, description, action, children, className }) {
  return (
    <section className={cn('mb-5 last:mb-0', className)}>
      {(title || description) && (
        <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
          <div className="space-y-1.5">
            {title && <Heading>{title}</Heading>}
            {description && (
              <p className="text-[13px] text-muted-foreground leading-relaxed">
                {description}
              </p>
            )}
          </div>
          {action}
        </div>
      )}
      {children}
    </section>
  );
}