import React, { ReactNode } from 'react';
import classNames from 'classnames/bind';

import Switch from 'components/switch/Switch';

import s from './ToggleSetting.module.scss';

const cn = classNames.bind(s);

interface IToggleSettingProps {
  children: ReactNode;
  title: string;
  description?: string;
  value: boolean;
  onToggle: () => void;
  color?: string;
  loading?: boolean;
}

export const ToggleSetting = ({
  children,
  title,
  description,
  value,
  onToggle,
  color,
  loading,
}: IToggleSettingProps) => (
  <div className={cn(s.toggleSetting, { loading })}>
    <div className={s.toggleSetting__title}>{title}</div>
    <div className={s.toggleSetting__toggle}>
      <Switch isOn={loading ? false : value} onToggle={() => onToggle()} color={color} />
    </div>
    <div className={s.toggleSetting__description}>{description}</div>
    {children && <div className={s.toggleSetting__content}>{children}</div>}
  </div>
);