import React, { memo } from "react";

function SettingsTab({ settings, onSettingsChange, settingsNotice, saveSettings }) {
  return (
    <section className="card">
      <h2>Глобальные настройки аккаунтов</h2>
      <div className="row">
        <label>
          <span className="label-line">Лимит групп на аккаунт</span>
          <input
            type="number"
            min="1"
            value={settings.accountMaxGroups}
            onChange={(event) => onSettingsChange("accountMaxGroups", Number(event.target.value))}
          />
        </label>
        <label>
          <span className="label-line">Лимит действий в день на аккаунт</span>
          <input
            type="number"
            min="1"
            value={settings.accountDailyLimit}
            onChange={(event) => onSettingsChange("accountDailyLimit", Number(event.target.value))}
          />
        </label>
        <label>
          <span className="label-line">Таймер после FLOOD (мин)</span>
          <input
            type="number"
            min="1"
            value={settings.floodCooldownMinutes}
            onChange={(event) => onSettingsChange("floodCooldownMinutes", Number(event.target.value))}
          />
        </label>
        <label>
          <span className="label-line">Хранить очередь (часы)</span>
          <input
            type="number"
            min="1"
            value={settings.queueTtlHours}
            onChange={(event) => onSettingsChange("queueTtlHours", Number(event.target.value))}
          />
        </label>
      </div>
      <div className="row-inline">
        <button className="secondary" onClick={saveSettings}>Сохранить настройки</button>
      </div>
      {settingsNotice && (
        <div className={`notice inline ${settingsNotice.tone}`}>{settingsNotice.text}</div>
      )}
    </section>
  );
}

export default memo(SettingsTab);
