/* global React */
(function () {
  const T = window.SC_T;

  function Checkbox({ checked, onChange, label, sub }) {
    return (
      <label
        style={{
          display: 'flex', alignItems: 'center', gap: 11,
          padding: '9px 12px', borderRadius: 8, cursor: 'pointer',
          background: checked ? T.accentSoft : 'transparent',
          transition: 'background .15s ease',
        }}
      >
        <span style={{
          width: 18, height: 18, borderRadius: 5, flexShrink: 0,
          border: `1.5px solid ${checked ? T.accent : T.border}`,
          background: checked ? T.accent : T.surface,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all .15s ease',
        }}>
          {checked && (
            <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
              <path d="M2 7l3.5 3.5L12 4" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          )}
        </span>
        <span style={{ flex: 1, fontSize: 13.5, color: T.ink, fontWeight: 500 }}>{label}</span>
        {sub != null && (
          <span style={{ fontSize: 11, color: T.inkMuted, fontVariantNumeric: 'tabular-nums' }}>
            {sub.toLocaleString('ru')}
          </span>
        )}
        <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} style={{ display: 'none' }} />
      </label>
    );
  }

  window.Checkbox = Checkbox;
})();