import React from "react";
import "./setting-row-styles.scss";
import { SettingRowProps } from "@app/models/components";

const SettingRow: React.FC<SettingRowProps> = ({
  label,
  description,
  htmlFor,
  children,
}) => {
  return (
    <div className="setting-row">
      <div className="setting-row-label">
        {htmlFor ? (
          <label htmlFor={htmlFor}>{label}</label>
        ) : (
          <span>{label}</span>
        )}
        {description && <p>{description}</p>}
      </div>
      <div className="setting-row-control">{children}</div>
    </div>
  );
};

export default SettingRow;