import React, { FC } from "react";
import { SettingRowTitle, SettingRowWrapper } from "./Settings.styles";
import { Aligment, Icon, Loader, TextLabel } from "venice-ui";

interface ISettingRow {
  title?: string;
  children: React.ReactNode;
  onClick?: () => void;
  loader?: boolean;
  tooltip?: string;
}

export const SettingRow: FC<ISettingRow> = ({
  title,
  onClick,
  children,
  loader = false,
  tooltip
}) => {
  return (
    <SettingRowWrapper>
      <Aligment gap={8} justify="flex-start">
        <SettingRowTitle>{title}</SettingRowTitle>
        {loader ? (
          <Loader size="sm" />
        ) : (
          onClick && <Icon name="edit" size={"md"} onClick={onClick} tooltip={tooltip}/>
        )}
      </Aligment>
      {children}
    </SettingRowWrapper>
  );
};