import { cn } from "@/lib/utils";
import { Label } from "@/components/ui/label";

interface SettingFieldProps {
  id?: string;
  label: string;
  description?: string;
  /** The control element (input, select, switch, …). */
  control: React.ReactNode;
  /** Width/layout for the control column; defaults to a right column on sm+. */
  controlClassName?: string;
  className?: string;
}

/**
 * A label + control row used throughout the settings sections.
 * Labels stack above the control on small screens and sit beside it
 * on larger ones for a scannable settings form.
 */
export function SettingField({
  id,
  label,
  description,
  control,
  controlClassName,
  className,
}: SettingFieldProps) {
  return (
    <div
      className={cn(
        "flex flex-col gap-2.5 sm:flex-row sm:items-start sm:justify-between sm:gap-6",
        className,
      )}
    >
      <div className="min-w-0 flex-1 space-y-1">
        <Label htmlFor={id} className="text-sm font-medium">
          {label}
        </Label>
        {description && (
          <p className="text-xs leading-relaxed text-muted-foreground">
            {description}
          </p>
        )}
      </div>
      <div
        className={cn(
          "w-full sm:w-72 sm:shrink-0",
          controlClassName,
        )}
      >
        {control}
      </div>
    </div>
  );
}