/**
 * Renders one labelled setting of the settings page and the profile's
 * "manage" tab.
 *
 * @module
 */

import type { ReactNode } from "react";

/**
 * Passed to {@link SettingRow} by `Settings`, `ProfileManageTab` and
 * `RoleSwitcher`.
 */
export interface SettingRowProps {
  label: ReactNode;
  /** It is the row's control, usually a `Segmented`. */
  children: ReactNode;
}

/**
 * Renders `label` beside `children`, as a row of the
 * `.profile-appearance-grid` its caller wraps the rows in.
 */
export function SettingRow(
  { label, children }: SettingRowProps,
): React.JSX.Element {
  return (
    <div className="profile-appearance-row">
      <span className="profile-appearance-label">{label}</span>
      {children}
    </div>
  );
}