import { clsx } from "clsx";

type Props = {
  title?: React.ReactNode;
  description?: React.ReactNode;
  actions?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  bodyClassName?: string;
  tone?: "default" | "muted" | "danger";
  /** Set false to remove the default body padding (useful when embedding a full-width table). */
  padded?: boolean;
};

export function FormSection({
  title,
  description,
  actions,
  children,
  className,
  bodyClassName,
  tone = "default",
  padded = true,
}: Props) {
  return (
    <section
      className={clsx(
        "rounded-2xl border bg-white",
        tone === "default" && "border-[var(--color-line)]",
        tone === "muted" && "border-[var(--color-line)] bg-[var(--color-line)]/30",
        tone === "danger" && "border-red-200 bg-red-50/40",
        className,
      )}
    >
      {(title || description || actions) && (
        <header
          className={clsx(
            "flex flex-wrap items-start justify-between gap-3 border-b px-5 py-4 sm:px-6",
            tone === "danger" ? "border-red-200" : "border-[var(--color-line)]",
          )}
        >
          <div className="min-w-0">
            {title && (
              <h3
                className={clsx(
                  "font-display text-[16px] font-extrabold tracking-tight",
                  tone === "danger" ? "text-red-700" : "text-[var(--color-ink)]",
                )}
              >
                {title}
              </h3>
            )}
            {description && (
              <p className="mt-1 text-[13px] text-[var(--color-slate)]">
                {description}
              </p>
            )}
          </div>
          {actions && (
            <div className="flex shrink-0 items-center gap-2">{actions}</div>
          )}
        </header>
      )}
      <div
        className={clsx(
          padded && "px-5 py-5 sm:px-6 sm:py-6",
          bodyClassName,
        )}
      >
        {children}
      </div>
    </section>
  );
}
