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

interface SettingsCardProps {
  title: string;
  description: string;
  icon?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
  className?: string;
}

/**
 * Container for one settings group: a titled card with an optional
 * footer action (e.g. "Save changes").
 */
export function SettingsCard({
  title,
  description,
  icon,
  children,
  footer,
  className,
}: SettingsCardProps) {
  return (
    <section className={cn("rounded-lg border bg-card", className)}>
      <div className="flex items-start gap-3 border-b border-border/70 px-5 py-4">
        {icon && (
          <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
            {icon}
          </span>
        )}
        <div className="space-y-0.5">
          <h2 className="text-sm font-semibold">{title}</h2>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
      <div className="p-5">{children}</div>
      {footer && (
        <div className="flex items-center justify-end gap-2 rounded-b-lg border-t border-border/70 bg-muted/20 px-5 py-3">
          {footer}
        </div>
      )}
    </section>
  );
}