import { Card } from "@/components/ui";

/*
 * Every block on the settings page is one of these: icon, title, one line of
 * explanation, then the controls. Members and SSO adopted it when they moved
 * off their own page a card that looked different would read as a different
 * kind of thing rather than another setting.
 */
export function SectionCard({
    title,
    description,
    icon,
    actions,
    children,
    className,
}: {
    title: string;
    description?: string;
    icon: React.ReactNode;
    actions?: React.ReactNode;
    children: React.ReactNode;
    className?: string;
}) {
    return (
        <Card className={className}>
            <div className="mb-4 flex items-start gap-3">
                <div className="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded border border-border bg-surface-2 text-accent">{icon}</div>
                <div className="min-w-0 flex-1">
                    <h2 className="text-base font-bold tracking-[-0.02em] text-text-primary">{title}</h2>
                    {description && <p className="mt-0.5 text-sm text-text-secondary">{description}</p>}
                </div>
                {actions && <div className="flex-shrink-0">{actions}</div>}
            </div>
            {children}
        </Card>
    );
}
