import type { ReactNode } from "react";

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

type TransactionFormSectionProps = {
  title: string;
  description?: string;
  icon?: ReactNode;
  children: ReactNode;
  className?: string;
  contentClassName?: string;
};

export function TransactionFormSection({
  title,
  description,
  icon,
  children,
  className,
  contentClassName,
}: TransactionFormSectionProps) {
  return (
    <section
      className={cn(
        "scroll-mt-6 overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm",
        className,
      )}
    >
      <div className="flex items-start gap-3.5 border-b border-border/50 bg-muted/25 px-5 py-4 sm:px-6">
        {icon ? (
          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-background text-primary shadow-xs">
            {icon}
          </div>
        ) : null}
        <div className="min-w-0 pt-0.5">
          <h2 className="font-semibold text-base text-foreground tracking-tight">{title}</h2>
          {description ? (
            <p className="mt-1 max-w-2xl text-muted-foreground text-sm leading-relaxed">{description}</p>
          ) : null}
        </div>
      </div>
      <div className={cn("min-w-0 px-5 py-5 sm:px-6 sm:py-6", contentClassName)}>{children}</div>
    </section>
  );
}