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

  function PrimaryButton({ children, onClick, disabled, full = true, loading, leftIcon, style }) {
    const [pressed, setPressed] = useState(false);
    return (
      <button
        onClick={onClick}
        onMouseDown={() => setPressed(true)}
        onMouseUp={() => setPressed(false)}
        onMouseLeave={() => setPressed(false)}
        disabled={disabled}
        style={{
          width: full ? '100%' : 'auto',
          padding: '11px 18px', border: 'none', borderRadius: 10,
          background: disabled
            ? '#D1D5DB'
            : `linear-gradient(135deg, ${T.accent} 0%, ${T.accent2} 100%)`,
          color: '#fff', fontSize: 14, fontWeight: 600,
          cursor: disabled ? 'not-allowed' : 'pointer',
          boxShadow: disabled ? 'none' : (pressed
            ? '0 1px 2px rgba(91,92,246,0.3)'
            : '0 4px 14px rgba(91,92,246,0.32), 0 1px 2px rgba(91,92,246,0.2)'),
          transform: pressed && !disabled ? 'scale(0.98)' : 'scale(1)',
          transition: 'transform .12s ease, box-shadow .15s ease',
          opacity: disabled ? 0.5 : 1,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          gap: 8, fontFamily: 'inherit', ...style,
        }}
      >
        {loading && <Spinner size={14} color="#fff" />}
        {leftIcon}
        {children}
      </button>
    );
  }

  function GhostButton({ children, onClick, leftIcon, style, danger, disabled }) {
    const [hover, setHover] = useState(false);
    return (
      <button
        onClick={onClick}
        disabled={disabled}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          padding: '7px 12px',
          border: `1px solid ${hover ? (danger ? T.err : T.ink) : T.border}`,
          borderRadius: 8, background: T.surface,
          color: danger ? T.err : T.ink,
          fontSize: 13, fontWeight: 500, cursor: disabled ? 'not-allowed' : 'pointer',
          opacity: disabled ? 0.5 : 1,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'inherit', transition: 'all .15s ease', ...style,
        }}
      >
        {leftIcon}
        {children}
      </button>
    );
  }

  Object.assign(window, { PrimaryButton, GhostButton });
})();