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

  function ErrorScreen({ message, onRetry }) {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 40, gap: 16, textAlign: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: T.errSoft, border: `1px solid ${T.err}33`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={T.err} strokeWidth="2" strokeLinecap="round">
            <circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/>
          </svg>
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, color: T.err }}>Произошла ошибка</div>
        <div style={{ fontSize: 14, color: T.inkMuted, maxWidth: 380, lineHeight: 1.6 }}>{message}</div>
        <GhostButton onClick={onRetry} style={{ marginTop: 8 }}>Попробовать снова</GhostButton>
      </div>
    );
  }

  window.ErrorScreen = ErrorScreen;
})();