/**
 * Setting Row Component
 *
 * Standard row layout with label/description on left, control on right
 *
 * @package ProRank\SEO
 * @since   1.0.0
 */

import { ReactNode } from '@wordpress/element';

interface SettingRowProps {
  label: string;
  description?: string;
  children: ReactNode;
}

const SettingRow = ({ label, description, children }: SettingRowProps) => {
  return (
    <div className="prorank-setting-row">
      <div className="prorank-setting-info">
        <div className="prorank-setting-label">{label}</div>
        {description && <div className="prorank-setting-desc">{description}</div>}
      </div>
      <div className="prorank-setting-control">
        {children}
      </div>
    </div>
  );
};

export default SettingRow;