import React from 'react';
import { Label } from '@/components/ui/label';

interface SettingsSectionProps {
  label: string;
  description?: string;
  required?: boolean;
  children: React.ReactNode;
  htmlFor?: string;
}

export function SettingsSection({
  label,
  description,
  required = false,
  children,
  htmlFor,
}: SettingsSectionProps) {
  return (
    <div className="space-y-2">
      <Label htmlFor={htmlFor} className="text-sm font-medium">
        {label}
        {required && <span className="text-destructive ml-1">*</span>}
      </Label>
      {description && (
        <p className="text-sm text-muted-foreground">{description}</p>
      )}
      <div>{children}</div>
    </div>
  );
}