;(function () {
/* EmptyPositions — Portfolio page state when positions.length === 0.
   Pushes the user toward the Trade tab to open one. */

const EmptyPositions = ({ onOpenTrade }) => (
  <div style={{
    backgroundColor: '#fff',
    borderRadius: '20px',
    boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
    padding: '32px 24px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '12px',
    textAlign: 'center',
  }}>
    <div style={{
      width: '56px',
      height: '56px',
      borderRadius: '28px',
      backgroundColor: 'rgba(0, 175, 171, 0.10)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
        <path d="M3 12h18M12 3v18" stroke="#00AFAB" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    </div>
    <div style={{ fontFamily: 'Gilroy', fontWeight: 600, fontSize: '16px', color: colors.ink }}>
      No open positions
    </div>
    <div style={{ fontFamily: 'Inter', fontSize: '13px', color: colors.muted, lineHeight: 1.5, maxWidth: '260px' }}>
      Find an instrument on the Trade tab and place an order to open your first position.
    </div>
    <button
      onClick={onOpenTrade}
      style={{
        border: 'none',
        background: '#00AFAB',
        color: '#fff',
        padding: '12px 24px',
        borderRadius: '999px',
        fontFamily: 'Gilroy',
        fontWeight: 600,
        fontSize: '14px',
        cursor: 'pointer',
        marginTop: '4px',
      }}
    >
      Open new position
    </button>
  </div>
);

Object.assign(window, { EmptyPositions });
})();