import * as React from 'react';
import { clsx } from 'clsx';
import { AlertBanner } from './AlertBanner.js';

export interface FormSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
  title: React.ReactNode;
  description?: React.ReactNode;
  error?: React.ReactNode;
  actions?: React.ReactNode;
}

export function FormSection({
  title,
  description,
  error,
  actions,
  className,
  children,
  ...props
}: FormSectionProps) {
  return (
    <section
      className={clsx(
        'grid gap-4 rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-5 shadow-sm shadow-black/[0.03]',
        className
      )}
      {...props}
    >
      <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <h3 className="m-0 text-base font-semibold leading-6 text-[var(--bl-text-primary)]">
            {title}
          </h3>
          {description && (
            <p className="mt-1 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>
      {error && <AlertBanner tone="error">{error}</AlertBanner>}
      {children}
    </section>
  );
}