import { cn } from "@/lib/utils";

type Props = {
  title: string;
  description?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  /** Tighter padding / gaps for dense master forms. */
  compact?: boolean;
};

export function FormPanel({
  title,
  description,
  action,
  children,
  className,
  compact = false,
}: Props) {
  return (
    <section className={cn(compact ? "space-y-1.5" : "space-y-3")}>
      <div className="flex flex-wrap items-end justify-between gap-2">
        <div>
          <h2 className="text-sm font-semibold tracking-tight">{title}</h2>
          {description ? (
            <p className="mt-0.5 text-muted-foreground text-xs leading-snug">{description}</p>
          ) : null}
        </div>
        {action}
      </div>
      <div
        className={cn(
          "border bg-card shadow-xs",
          compact ? "rounded-lg p-3" : "rounded-xl p-5",
          className,
        )}
      >
        {children}
      </div>
    </section>
  );
}