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

type Props = {
  title: string;
  description?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
};

export function FormPanel({ title, description, action, children, className }: Props) {
  return (
    <section className="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">{description}</p>
          ) : null}
        </div>
        {action}
      </div>
      <div className={cn("rounded-xl border bg-card p-5 shadow-xs", className)}>{children}</div>
    </section>
  );
}