import React from 'react';
import { clsx } from 'clsx';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
import { Separator } from '@/components/ui';

export interface SettingsSectionProps {
  title: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
  actions?: React.ReactNode;
}

/**
 * Settings section component for settings pages
 */
export const SettingsSection = ({
  title,
  description,
  children,
  className,
  actions,
}: SettingsSectionProps) => {
  return (
    <Card className={clsx('mb-6', className)}>
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle>{title}</CardTitle>
            {description && <CardDescription className="mt-1">{description}</CardDescription>}
          </div>
          {actions && <div className="ml-4">{actions}</div>}
        </div>
      </CardHeader>
      <Separator />
      <CardContent className="pt-6">
        <div className="space-y-6">{children}</div>
      </CardContent>
    </Card>
  );
};