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

  function HistoryItem({ status, text, count, time, delay = 0 }) {
    const [hover, setHover] = useState(false);
    const color = status === 'ok' ? T.ok : status === 'err' ? T.err : T.warn;
    return (
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '7px 10px', borderRadius: 8, cursor: 'pointer',
          background: hover ? T.accentSoft : 'transparent',
          animation: `sc-slide-in 0.5s ${delay}ms both cubic-bezier(0.16, 1, 0.3, 1)`,
          transition: 'background .15s ease',
        }}
      >
        <span style={{ width: 7, height: 7, borderRadius: 999, background: color, flexShrink: 0 }} />
        <span style={{ flex: 1, fontSize: 12.5, color: T.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 }}>
          {text}
        </span>
        <span style={{ fontSize: 11, color: T.inkMuted, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>
          {count > 0 ? count.toLocaleString('ru') : '—'}
        </span>
        <span style={{ fontSize: 11, color: T.inkSubtle, minWidth: 28, textAlign: 'right' }}>{time}</span>
      </div>
    );
  }

  window.HistoryItem = HistoryItem;
})();