import { Card, CardContent } from '@/components/ui/card';

export function SettingsCard({
  title,
  description,
  children,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  return (
    <Card className="rounded-xl py-0 gap-0 overflow-hidden">
      <div className="px-6 pt-5 pb-4 border-b">
        <p className="font-semibold text-sm">{title}</p>
        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
      </div>
      <CardContent className="px-6 py-5">{children}</CardContent>
    </Card>
  );
}
